html - float 电池和网格系统

Question

我真的希望你能帮我解决这个问题。我正在尝试创建一个像 pinterest 上的网格系统，但我也想要一个左侧边栏。所以我需要的是并排 float 的 2 个 div，并且包含网格单元格的那个需要调整它的宽度以适应浏览器分辨率 - 有点像这样:

[  Sidebar  ] [ [Cell][Cell][Cell][Cell][Cell][Cell] ]
              [ [Cell][Cell][Cell][Cell]             ]


[  Sidebar  ] [ [Cell][Cell][Cell] ]
              [ [Cell][Cell][Cell] ]
              [ [Cell][Cell][Cell] ]
              [ [Cell]             ]

目前，当我调整浏览器大小时，包含单元格的 div 会落在边栏下方 - 有没有办法让它自动调整？谢谢

Answer 1

这应该可以帮助您入门。它使用 display:table 来完成工作。

div {
    display: table;
}
section {
    display:table-cell
}
.one {
    width:150px;
    vertical-align:top;
}
.box {
    height:100px;
    width:100px;
    float:left;
    background-color:blue;
    margin:5px;
}

<div>
    <section class="one">
        <p>sidebar</p>
    </section>
    <section class="grid">
        <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="box"></div>
    </section>
</div>

http://jsfiddle.net/mJhGM/