html - 如何在灵活的布局中创建等间距的 div 网格？

Question

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

我的问题特别集中在五个盒子上。我努力使用 CSS 让它工作。你们有这样的布局的简单设置吗？

Answer 1

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

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;}

​

这是一个外观示例