你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float
是一种选择,但是使用 inline-block
会更简单。让我们看下使用这两种方法的例子:
困难的方式(使用浮动)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
float:left;
width:200px;
height:100px;
margin:1em;
background-color:#6ac5ac;
}
.after_box {
clear:left;
background-color:#d64078;
}
</style>
</head>
<body>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="box">
我在浮动!
</div>
<div class="after_box">
我在使用 clear,所以我不会浮动到上面那堆盒子的旁边。
</div>
</body>
</html>
效果图如下:
容易的方式(使用 inline-block)
你可以用 display
属性的值 inline-block
来实现相同效果。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
display: inline-block;
width:200px;
height:100px;
margin:1em;
background-color:#6ac5ac;
}
.after_box {
clear:left;
background-color:#d64078;
}
</style>
</head>
<body>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="box">
我是一个行内块!
</div>
<div class="after_box">
这次我可没有用 clear 。太棒了!
</div>
</body>
</html>
效果图如下:
你得做些额外工作来让IE6和IE7支持 inline-block
。有些时候人们谈到 inline-block
会触发叫做 hasLayout
的东西,你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣,可以在前面那个链接中找到更详细的信息。否则我们就继续下去吧。