Question

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

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

无论如何，我对Stylesheets和HTML仍然相对较新，所以我想把它扔给你们所有人，看看你对这个替代内容放置的看法。你认为这种方法有任何负面影响吗？我已经尝试过在大多数浏览器中，它们似乎都能正确呈现，但我不知道未来会怎样......或者，有人可以推荐一种更好的方法来浮动我的容器，以便内部内容不会浮动为好。我绝对乐于接受建议，并感谢您提供的任何反馈。

提前感谢您的帮助！

CJAM

Answer 1

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

Answer 2

用css实现某些目标确实没有对错。它更多的是有效性/灵活性。

使用绝对位置进行列布局减少了这一点。插入，删除列将要求您重新计算所有定位。如果有相同样式列的多个实例怎么办？我们无法100％重复使用样式，因为它绝对定位。

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

使用绝对定位而不是浮动定位柱

2 个答案: