html - 柔軟なレイアウトで等間隔のdivグリッドを作成するにはどうすればよいですか？

Question

私はこのようなレイアウトを作成しようとしています：

私の質問は、特に5つのボックスを中心にしています。私はCSSを機能させるのに苦労しています。このようなレイアウトの簡単なセットアップはありますか？

Answer 1

幅が固定されているようですので、例を示します。幅は幅に対して正確ではありませんが、必要な値を簡単に設定できます。ここでの主なものはfloat:left、divを1行に表示するsmall_bottomクラスにあります。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;}

​

これがどのように見えるかの例です