一行上的CSS块元素

Question

处理需要在一行上的一系列块元素的最常用方法是什么（例如，如果javascript需要能够修改它们的宽度）？应用浮点数的优点和缺点是什么：左边的每个都使用定位来放置它们？

Answer 1

好吧，如果你不太关心旧的浏览器（我在看你，IE6），最好的办法就是

display:inline-block;

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

Answer 2

浮动将是我的选择，但它实际上取决于您希望实现的目标。如果您可以提供更具体的示例，我将能够为您提供明确的理由，说明我认为您应该使用的内容和原因。然而，这里有一套简短的利弊（我假设通过定位你的意思是绝对定位）：

定位专业人士：

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

定位缺点：

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

Float pros：

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

Float cons：

• 对于那些经验不足的浮动布局可能导致在SO上提出许多问题的人有很多陷阱：）

至于明确：塞巴斯蒂安提到的这两个要素，有一个简单的方法。假设你有一个容器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或浮动容器，这将是非常语义 - 所以这是一个稍微更优雅的解决方案。只需添加overflow：hidden;如此容器div：

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

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

Answer 3

父容器不会随它们伸展，除非它也被赋予了一个浮动标签或者有一个带有clear的br：both;在底部。

我会选择漂浮：左边而不是定位。当一个对象伸展时，浏览器会执行所有对齐操作。所以你关心的事情就少了。

Answer 4

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

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

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

Answer 5

在我这样的情况下漂浮的唯一不利之处就是你需要左对齐或右对齐 - 中心不是一种选择。但是你已经提到你正在使用宽度的绝对值，所以你可以将所有浮动元素嵌套在DIV元素中，并向父DIV添加margin-right或margin-left来模拟中心对齐。