IE和FF中高度自适应

在CSS的布局中,经常碰到高度自适应的问题,这里给出一种解决方案。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
 <title>Box Float</title>
 <style type="text/css">
  
  body
  {
   margin:15px;
   font-family:Arial;
   font-size:12px;
  }
  .father
  {
   background-color:#ffff99;
   border:1px solid #ff0099;
   padding:5px;
  }
  .father div
  {
   padding:10px;
   margin:15px;
   border:1px dashed #eef7dd;
   background-color:#90daff;
  }
  .father p
  {
   border:1px dashed #332158;
   background-color:#ff90ba;
   clear:both;
  }
  .son1
  {
   float:left;
  }
  .son2
  {
   float:left;
  }
  .son3
  {
   float:right;
   /*在这里设置的clear属性没有什么用,要将属性设置在含有文字的DIV中*/
   /*clear:both;*/
  }
  /*解决自适应高度问题*/
  .father .clear
  {
   margin:0px;
   padding:0px;
   border:0px;
   clear:both;
  }
  
 
 </style>
</head>

<body>

<div class="father">

 <div class="son1">
  Box-1<br/>
  根据内容来调整宽度

 </div>
 <div class="son2">
  Box-2
 </div>
 <div class="son3">
  Box-3
 </div>
 <p>在IE和FF中可以自适应的CSS布局方式</p>
 <div class="clear">
 </div>
</div>

</body>
</html>
效果:

 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页