项目心得之--响应式布局

来源：互联网发布：中国软件行业协会会费编辑：程序博客网时间：2024/06/17 10:30

<p>第一次写博客，我觉得有必要把我自己在项目中遇到的问题，以及解决的方案写出来。</p><p>印象比较深刻的是在一个DIV中如何自动的撑开内容的高度。例如下代码：</p>

<!doctype html><html><head><meta charset="utf-8"><title>内容填充高度</title></head>

<style type="text/css">

<span style="white-space:pre"></span>

<span></span>

*{
padding:0px;
margin:0px auto;
}
.bigbox{
width:500px;
}
.imgbox img{
width:200px;
height:200px;
margin-left:20px;

flaot:left;

}

<span style="font-family: Arial, Helvetica, sans-serif;"></span>

<span style="font-family: Arial, Helvetica, sans-serif;"></span>

</style><body><div class="bigbox">        <div class="imgbox">             <img src="images/food_1.jpg" />             <img src="images/food_2.jpg" />             <img src="images/food_3.jpg" />             <img src="images/food_4.jpg" />        </div></div></body></html>

这样看来，bigbox是没有高度的，可以用firebug打开看一下，本人喜欢用firebug.当初我在做项目的时候遇到这个问题，第一就是想给他设定一个高度，当然是不行的，当屏幕分辨率变化的时候，那个高度是无法支撑内容的，原因是imgbox img的float引起的。但是如何自动撑开呢？以至于页面能够自动的适应。这里给出了一个很好解决的方案，就是在浮动的容器后面加一个清楚浮动的模块。如：

在img后面加入一个<div class="clearfloat"></div> 样式为.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;} ；这样就完美的解决了问题啦不信你试试。。。

当然说道自适应屏幕还有一个方法没有这么复杂，简单一点，据说用min-height即可解决。据说IE6不支持，你可以试一下，哈哈哈。所以一般是这样写解决的兼容的问题,代码如下：

height:auto!important;
height:400px;
min-height:400px;

0 0