一行上的CSS块元素

Question

处理一系列需要在一条线上的块元素的最常用方法是什么(例如,如果javascript需要能够修改它们的宽度)？应用浮点数的优点和缺点是什么:左边是每个还是使用定位放置它们？

Answer 1

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

display:inline-block;

基本上,它会创建一个盒子模型元素,而不会在它之前或之后清除,因此它仍然在行中.每个现代浏览器都很好地解释它.

Answer 2

浮动将是我的选择，但这实际上取决于您想要实现的目标。如果您可以提供一个更具体的示例，我将能够给您一个明确的理由，说明我认为您应该使用什么以及为什么。然而，这里是我遇到的一系列优点和缺点（我假设定位意味着绝对定位）：

定位优点：

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

定位缺点：

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

浮动优点：

• 非常容易构建简单和高级的布局
• 没有页脚问题
• 不用担心精度，浏览器会为您处理好
• 父容器拉伸

浮动缺点：

• 对于那些对浮动布局缺乏经验的人来说，有很多陷阱，可能会导致对 SO 提出许多问题:)

至于塞巴斯蒂安提到的clear:both元素，有一个简单的方法可以解决这个问题。假设您有一个容器 div 和 2 个浮动 div 。

网页：

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

现在你的容器应该正确地包裹浮动的 div。