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

最新推荐文章于 2021-12-23 09:55:16 发布

喏喏悠水

最新推荐文章于 2021-12-23 09:55:16 发布

阅读量243

点赞数

文章标签：响应式布局博客

本文链接：https://blog.csdn.net/nuonuoyoushui/article/details/52732525

版权

<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;} ；这样就完美的解决了问题啦不信你试试。。。