Html 浮动单元和网格系统

我真的希望你能帮我。我正在尝试创建一个类似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会掉到侧边栏下面，有没有办法让它自动调整？谢谢你

这应该可以让你开始了。它使用

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>

div{
显示：表格；
}
部分{
显示：表格单元格
}
.一{
宽度：150px；
垂直对齐：顶部；
}
.盒子{
高度：100px；
宽度：100px；
浮动：左；
背景颜色：蓝色；
保证金：5px；
}
边栏

---

您可以这样做：

边栏栏列向左浮动，主内容列向左浮动

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

边栏

---

您可以将它们放在li's中，然后浮动

li's

left给右边的div a

left margin

侧边栏的大小…请不要仅仅依靠JSFIDLE来保存您的解决方案，也把它放在这里。