0

我真的希望你能帮我解决这个问题。我正在尝试创建一个类似于 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 会落在侧边栏下方 - 有没有办法让它自动调整？谢谢

4

2 回答 2

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/

于 2013-06-10T15:03:54.647 回答
0

你可以这样做：示例

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

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

于 2013-06-10T15:07:08.583 回答