Question

我有一些看起来像这样的HTML：

<body>
    <div id="panel1" class="panel"> Panel 1 </div>
    <div id="panel2" class="panel"> Panel 2 </div>
    <div id="panel3" class="panel"> Panel 3 </div>
    <div id="panel4" class="panel"> Panel 4 </div>
    <div id="panel5" class="panel"> Panel 5 </div>
    <div id="panel6" class="panel"> Panel 6 </div>
    <div id="panel7" class="panel"> Panel 7 </div>
    <div id="contentheader"> Header </div>
    <div id="content"> Content </div>
</body>

我想要的是一些面板（比方说1-4）浮动在左边，其他面板（5-7）浮在右边，标题和内容介于两者之间，理想情况下没有必须将左右面板包裹在包装div中。

Answer 1

使用易于使用的CSS框架，例如Blueprint CSS，The Golden Grid或960。他们为开发基于网格的网站提供了出色的跨平台支持，例如您正在开发的网站。你根本不必担心细节问题。

Answer 2

如何将#contentHeader和#content包装在div中并像其中一个面板一样浮动它？你必须把它放在其中...（div1,2,3,4，内容，5,6,7）。

取决于你对面板宽度和内容的了解，我会说。

Answer 3

如果你知道面板的宽度（左，右，标题和内容）和标题的高度，你可以给标题和内容一个 {position：absolute; 并将它放在面板之间。

如果你不知道内容的宽度，你可能会遇到一些IE问题但是......

（只是猜测，我还没试过）

Answer 4

答案完全取决于您是希望中间列是固定宽度还是流量。

如果固定宽度，您的生活将变得更加容易，您可以使用几种流行的CSS网格系统之一：blueprint，yui，960等。

如果流畅，您应该使用3-column techniques outlined at alistapart.com。

左列和右列中具有多个div的三列布局

4 个答案: