CSS 块元素在一行上

Question

处理需要在一行上的一系列块元素的最常见方法是什么（例如，如果 javascript 需要能够修改它们的宽度）？ 与使用定位来放置它们相比，对每个它们应用 float:left 有何优缺点？

Answer 1

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

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

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

Answer 2

对我来说，在这种情况下浮动的唯一缺点是你要么需要向左对齐，要么向右对齐——居中不是一个选择。 然而，您已经提到您使用宽度的绝对值，因此您可以将所有浮动元素嵌套在 DIV 元素中，并向父 DIV 添加 margin-right 或 margin-left 来模拟中心对齐。

Answer 3

好吧，如果您不太关心旧版浏览器（我正在看您，IE6），这里最好的方法是使用

display:inline-block;

基本上，它创建一个盒模型元素，而不在其之前或之后清除，因此它保留在线。 每个现代浏览器都能很好地解释它。

Answer 4

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

定位优点：

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

。 定位缺点：

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

浮动优点：

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

浮动缺点：

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

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

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

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

Answer 5

父容器不会随它们一起拉伸，除非它也被分配了一个 float 标签或者有一个带有clear:both; 的 br 。 在底部。

我会选择 float:left 而不是定位。 当一个对象拉伸时，浏览器会执行所有对齐操作。 所以你需要关心的事情就更少了。