3 列 Web 部件页面？答案

【问题标题】：3-column Web Parts Page?3 列 Web 部件页面？
【发布时间】：2011-03-12 22:19:49
【问题描述】：

我正在为一些东西设置一个 asp.net Web 部件门户。我有一个 [希望] 非常简单的问题。如何让页面有 3 个主要列？

现在我有两列使用<div id="leftpanel" style="float: left"> 和<div id="rightpanel" style="float: right">。但我不知道如何在中心放置一个面板。右侧面板基本上在中心，没有 css float: middle/center。那么三面板网页是如何实现的呢？

【问题讨论】：

您不需要将右侧的列向右浮动。我总是倾向于向左浮动元素（因为这是西方人阅读的方式），当然除非它是页面右侧的单个元素（您可以向左浮动并使用边距）
效果不佳。在每个浏览器中看起来都不一样
唯一看起来不同的浏览器是 IE6，这是由于双边距错误，您可以使用 display: inline; 修复它。在浮动元素上。如果它在任何其他浏览器中看起来不同，那么你做错了。

标签： asp.net html css web-parts portlet

【解决方案1】：

<div class="container">
   <div class="column">
   </div>
   <div class="column">
   </div>
   <div class="column">
   </div> 
</div>
<div class="footer">
</div>

.container{width: 600px;}
.column{float: left; width: 200px;}
.footer{width: 600px; clear: both;}

【讨论】：

我的显示器现在是 1920x1200 分辨率；我对这个设计有点难过
@theorise - 当然，但它对于所有用户来说都是常量。您应该使用% 来定义您的宽度，以便布局可以随着用户的浏览器而改变。
@Kevin Vermeer，宽度是任意的。这回答了 OP 的问题。这不是关于流体/固定布局的争论。

【解决方案2】：

前两个向左浮动，最后一个向右浮动。

如果这不起作用，有时也不起作用，请使用 Ed B 的答案。

【讨论】：

【解决方案3】：

一个有 3 列的表格。在每列中添加一个 div。

将样式保留在 divs..而不是表格中

【讨论】：

我不会对此投反对票，即使我不赞成以表格为中心的设计。准备好被任何 CSS 狂热分子激怒吧！
表格用于表格内容，而不是布局。
表格是我想用的。
有时表格是绝对的最佳选择。我
表格永远不是布局的最佳选择。当然，它们始终是表格数据的最佳选择。标记不仅可怕且难以理解，而且您将有几个空单元格来容纳水平间距。另外，表格不像 div 那样语义化，这使得用 CSS 设计它们更加棘手。 HTML5 更进一步，添加了诸如
和
之类的标签