当前位置导航:炫浪网>>网络学院>>网页制作>>HTML与CSS教程

CSS布局中最小高度的妙用

       效果  操作系统  xml  xhtml  word   
      最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也支持了,但IE7处于测试阶段,等正式版发布到普及需一段也许比较长的时间,除非MS把它捆绑在某个操作系统上, 
如何在现有基础上(IE6 80-90%),合理、妙用最小高度了?

假定有二个BOX,我们需要它的最小高度为150PX。

CSS

     div.box1,div.box2{
      width: 300px;
      min-height: 150px;
      background: #EEE;
      float: left;
      margin-right: 20px;
   }

xhtml

<div class="box1">IE中没保持最小高度为150px</div>
<div class=:box2">;最小高度可以设定一个BOX的最小高度,
当其内容较少时时,也能保持BOX的高度为一定
最小高度可以设定一个BOX的最小高度,
当其内容较少时时,也能保持BOX的高度为一定</div>

现在的效果,IE中没保持最小高度为150px。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="最小高度,min-height,CSS hack" />
<meta http-equiv="Description" content="最小高度可以设定一个BOX的最小高度,当其内

容较少时时,也能保持BOX的高度为一定ext)" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="author" content="forestgan" />
<meta name="copyright" content="http://www.forest53.com" />
<title>CSS布局中最小高度(min-height)的妙用</title>
<style type="text/css">
#wrap{width: 620px;
margin: 2em auto;font-size: 75%;}
div.box10,div.box20{
       width: 300px;
    min-height: 150px;
    background: #EEE;
    margin-right: 20px;
    float: left;
    text-align:left;
   }
 p{padding: 1em; margin: 0;}
</style>
</head>
<body>
  <div id="wrap">
    <div class="box10">
      <p>IE中没保持最小高度为150px</p>
    </div>
    <div class="box20" style="margin-right: 0;">
      <p>最小高度可以设定一个BOX的最小高度,
        当其内容较少时时,也能保持BOX的高度为一定最小高度可以设定一个BOX的最小高度


        当其内容较少时时,也能保持BOX的高度为一定最小高度可以设定一个BOX的最小高度


        当其内容较少时时,也能保持BOX的高度为一定最小高度可以设定一个BOX的最小高度


        当其内容较少时时,也能保持BOX的高度为一定最小高度可以设定一个BOX的最小高度


        当其内容较少时时,也能保持BOX的高度为一定最小高度可以设定一个BOX的最小高度


        当其内容较少时时,也能保持BOX的高度为一定</p>
    </div>
  </div>

</body>
</html>

[1] [2] 下一页  

相关内容
赞助商链接