文章/答案/技术大牛

发布

社区首页 >问答首页 >三列布局，左右两列有多个div

问三列布局，左右两列有多个div
EN

Stack Overflow用户

提问于 2009-02-19 20:12:13

回答 4查看 2.4K关注 0票数 1

我有一些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中。

html

css

回答 4

Stack Overflow用户

回答已采纳

发布于 2009-02-19 22:12:05

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

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

如果是流体，则应使用3-column techniques outlined at alistapart.com。

票数 0

Stack Overflow用户

发布于 2009-02-19 20:19:52

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

票数 5

Stack Overflow用户

发布于 2009-02-19 20:28:35

将#contentHeader和#content包装在div中，并像浮动面板一样浮动它，怎么样？你得把它放在他们中间。(div1，2，3，4，content，5，6，7)。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/566941

复制

相似问题

问三列布局，左右两列有多个div
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三列布局，左右两列有多个divEN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三列布局，左右两列有多个div
EN