<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>展云</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
*{margin:0;padding:0;}
.container{width:1150px;background:red;overflow:hidden;padding:10px 0 0 10px;}
.container .item{width:220px;height:360px;background:#666;float:left;margin:0 10px 10px 0;}
h1,.container{margin:10px;}
dl{width:100%;background:#333;line-height:25px;color:#fff;margin:30px 10px 30px;padding:10px;}
</style>
</head>
<body>
<h1>栅栏布局</h1>
<dl>
<dt>盒子宽度算法</dt>
<dd>逆推法：根据内容和间距来判断我们的可视区域</dd>
<dd>正推法：已知外层盒子宽度：1120px 1140 1200 1180 960</dd>
</dl>
<div class="container">
<div class="item">220px * 5 + 10*5 +10; 实际尺寸是1160培训；<br /></div>
<div class="item">可视区域的宽度是1500</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
