使用绝对定位而不是浮点数来定位列答案

【问题标题】：Positioning Columns With Absolute Positioning Instead of Floats使用绝对定位而不是浮点数来定位列
【发布时间】：2010-10-06 10:58:31
【问题描述】：

我已经阅读了几篇关于网站内容模板的文章。他们似乎都建议通过浮动将列放置在您的网站上。示例：

<div id="container" style="width: 1000px;">
    <div id="main_content" style="border: solid 1px Black; width: 798px; /* width = 800px -2px for border */ float: left; height: 400px;" ></div> 
    <div id="links_menu" style="border: solid 1px Black; width: 198px; float: right; height: 600px;"></div>      
</div>

但是，每当我使用浮动时，我总是设法破坏我的内容。我花更多的时间试图确定将<div syle="clear:both;" /> 放在哪里，而不是实际设计网站的外观和感觉。此外，每当我将我们的第三方 ComponentArt 控件之一放置在浮动容器中时，它都会被破坏并要求我指定高度和宽度，这些直到运行时才确定。

此外，我发现当我使用绝对定位时，事情似乎对我来说效果更好。示例：

<div style="width: 1000px; height: 600px; position: relative;">
    <div style="border: solid 1px Black; width: 798px; position: absolute; top: 0; left: 0; height: 400px;"></div>
    <div style="border: solid 1px Black; width: 198px; position: absolute; top: 0; right: 0; height: 600px;"></div>
</div>

无论如何，我对样式表和 HTML 还是比较陌生，所以我想把它扔给大家，看看你对这种内容放置替代方案的看法。您认为这种方法有什么负面影响吗？我已经在大多数浏览器中尝试过，它们似乎都可以正确呈现，但我不知道未来会怎样......或者，也许有人可以推荐一种更好的方法来浮动我的容器，以便内部内容不会像浮动一样好吧。我绝对愿意接受建议，并感谢您提供的任何反馈。

提前感谢您的帮助！

CJAM

【问题讨论】：

标签： asp.net html css

【解决方案1】：

用 css 实现某些东西真的没有对错。更多的是关于有效性/灵活性。

对列布局使用绝对位置可以减少这种情况。插入、删除列将需要您重新计算所有定位。如果有多个相同样式列的实例怎么办？我们不能 100% 重复使用样式，因为它是绝对定位的。

列布局有很多方法。看看一些@ listapart, positioniseverything

【讨论】：

【解决方案2】：

绝对定位容器的一个大问题是，当您事先不知道它们的高度时，会将内容放置在它们下方的页面上。在您的示例中，您已经定义了绝对定位元素的高度，因此这对您来说应该不是问题。如果它适合您，请使用它。

【讨论】：