浮动单元格和网格系统答案

【问题标题】：Floating Cells and a Grid System浮动单元格和网格系统
【发布时间】：2013-06-10 14:59:31
【问题描述】：

我真的希望你能帮助我解决这个问题。我正在尝试创建一个类似于 pinterest 上的网格系统，但我也想要一个左侧边栏。所以我需要的是 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 会落在侧边栏下方 - 有没有办法让它自动调整？谢谢

【问题讨论】：

你可以把它们放在 li's 中，然后将 li's 向左浮动
给右边的div一个left-margin侧边栏的大小...

标签： html css grid

【解决方案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/

【讨论】：

请不要仅仅依靠 jsfiddle 来保存您的解决方案，也请把它放在这里。

【解决方案2】：

你可以这样做：Example

侧边栏向左浮动，主内容栏向左浮动。

<div id="wrapper">

<div id="left">sidebar</div>
<div id="right">


    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

【讨论】：