您的位置：首页 > 其它

方框列数随着浏览器宽度改变而改变的几种方法

2015-04-28 21:22 176 查看

方框列数随着浏览器宽度改变而改变的几种方法

一,使用浮动float





<!DOCTYPE html>

<html>
<head lang="en">

<meta charset="UTF-8">

<title>考察浮动</title>

<style type="text/css">

#content {

background-color: red;

position: relative;

padding: 12px;/*red 的padding+blue的margin =测的宽 */

overflow: hidden;/*父元素overflow:hidden 可以闭合浮动*/        }

.div-in {

width:107px;

height: 54px;

background-color: blue;

margin:6px;/*测的各间距是12  一半是6 *//*margin不合并，因为float,正常位置是合并的*/

border:solid 1px #000000;

float: left;

}

</style>

</head>

<body>

<div id="content">

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

</div>

</body>

</html>

正常情况下，div与div之间测的是12就设12就好了，但是这是浮动，浮动的margin没有合并，会叠加，所以叠加后是12px ,那么每个蓝色div margin设为6px;
又测量红色背景边框据最近blue的div 距离是18px =6+12;
所以设外层div padding :12px
闭合浮动我这里用了父元素 设了overflow:hidden
可参考：那些年我们一起清除过的浮动
二待续：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航