IE和FF中高度自适应

最新推荐文章于 2024-08-07 15:34:42 发布

myfootprint

最新推荐文章于 2024-08-07 15:34:42 发布

阅读量458

点赞数

文章标签： ie class float border div html

本文链接：https://blog.csdn.net/myfootprint/article/details/4069398

版权

在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="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>
效果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

myfootprint

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE和FF中高度自适应

在CSS的布局中，经常碰到高度自适应的问题，这里给出一种解决方案。 Box Float body { margin:15px; font-family:Arial; font-size:12px; } .father { background-color:#ffff99; border:1px solid #ff0099; padding:5px;
复制链接

扫一扫