html - 一行上的 CSS 块元素

Question

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

Answer 1

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

display:inline-block;

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

Answer 2

浮动将是我的选择，但这实际上取决于您希望实现的目标。如果你能提供一个更具体的例子，我可以给你一个明确的理由，说明我认为你应该使用什么以及为什么要使用。但是，这是我遇到的一组简短的利弊（我假设定位是指绝对定位）：

定位优势：

• 相对于标记为相对位置的下一个祖先非常精确的定位 - 具有很大的灵活性
• 允许元素在视觉上与它们在 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 3

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

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

Answer 4

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

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

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

Answer 5

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