如何在灵活的布局中创建具有相等间距的div网格？

Question

我正在尝试创建这样的布局：

我的问题主要集中在五个方框上。我努力与CSS一起工作。你们有这么简单的布局吗？

Answer 1

我看到你有固定的宽度，所以这是一个例子。宽度不适合您的宽度，但您可以轻松设置所需的值。这里的主要内容是small_bottom类中的float:left，它使div显示在一行中。底层类中的overflow:hidden使得div包围浮动div（没有它将显示为内部没有任何内容）。如果您希望这取决于浏览器窗口宽度 - 请尝试使用宽度为百分比的小百分比。

HTML：

<div class="main">
    <div class="top"></div>
    <div class="bottom">
        <div class="small_bottom"></div>
        <div class="small_bottom"></div>
        <div class="small_bottom"></div>
        <div class="small_bottom"></div>
        <div class="small_bottom"></div>
    </div>
</div>​

CSS：

div{border:solid 1px;}
.main{width:350px; border:solid 1px;}
.top{ height:40px;margin:5px;}
.small_bottom{
    float:left;
    height:50px;
    width:50px;
    margin:5px;
}
.bottom{margin:5px; overflow:hidden;}

​

Here是一个看起来如何的例子