行上的CSS块元素

浮动将是我的选择,但它真的取决于你想要实现什么。如果你能提供一个更具体的例子,我可以给你一个明确的理由,说明我认为你应该使用什么和为什么。然而,这里有一组我已经遇到的利弊(我假设,通过定位,你的意思是绝对定位):

定位专家:

• 相对于下一个标记为相对位置的祖先,非常精确的定位允许很大的灵活性。
• 允许元素在视觉上与在DOM中的顺序不同

定位缺点:

• 很难与其他元素对齐,因为定位元素不再在文档流中,而且还因为所需的精度级别。
• 其他元素忽略绝对定位元素,这意味着您可能会有一个潜在的重叠,除非您考虑定位元素的最小和最大大小。
• 如果对列使用绝对定位,则很难实现页脚。

浮动专业:

• 非常容易构建简单和高级的布局
• 没有页脚问题
• 不用担心精度,浏览器会帮你解决这个问题。
• 父容器扩展

浮动缺点:

• 对于那些不太熟悉浮动布局的人来说,很多陷阱可能会导致很多问题被问到。

关于清楚:塞巴斯蒂安提到的两个元素,有一个简单的方法可以解决这个问题。假设您有一个容器分区和两个浮动分区。

Html:

<div id="con">
    <div class="float"></div>
    <div class="float"></div>
</div>

CSS:

#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }

如果要运行此代码,您会注意到容器div(洋红色)只有一个像素高,而浮动的div是正确的-这就是Sebastian提到的问题。现在,您可以接受他的建议,添加一个br或浮动容器,这将不是很有语义-所以这里有一个稍微优雅的解决方案。只需添加溢出:隐藏;到容器DIV,如下所示:

#con { background:#f0f; overflow:hidden; }

现在,你的容器应该适当地包裹漂浮的沙发床。

好吧,如果你不太关心旧的浏览器(我在看你,ie6),最好的方法是

display:inline-block;

基本上,它创建了一个框模型元素,而没有在它之前或之后清除,所以它保持在行中。每一个现代浏览器都能很好地解释它。

父容器不会用它们拉伸,除非它也被分配了一个float标记,或者底部有一个带有clear:both的br。

我将使用浮动:向左而不是定位。当一个对象拉伸时,浏览器将执行所有对齐操作。所以你就没那么在乎了。

我认为我不会显式地定位元素,而是指示浏览器使用display:inline为元素使用inline布局,并让浏览器处理定位。

关于浮动与定位,我认为使用定位排列它们的唯一方法是使用绝对定位,这意味着您需要处理重新调整大小(浏览器视图端口),以保持元素的位置。

我认为,通过使用float属性,浏览器可以为您处理重新调整大小的问题,并在正确的位置重新呈现元素。

对我来说,在这种情况下浮动的唯一缺点是,你要么需要左对齐,要么右对齐——居中不是一种选择。但是,您提到了使用宽度的绝对值,所以您可以将所有浮动元素嵌套在一个DIV元素中,并在父DIV中添加右边距或左边距以模拟中心对齐。