Html 一行上的 CSS 块元素

CSS block elements on a line

提问by Dan Monego

What's the most common way to deal with a series of block elements that need to be on a line (if javascript needs to be able to modify their widths, for example)? What are the pros and cons to applying float:left to each of them vs. using positioning to place them?

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

采纳答案by Darko Z

Floating would be my choice, but it really depends on what you wish to achieve. If you can provide a more specific example I would be able to give you a clear reason as to what and why I think you should use. However here is a brief set of pros and cons that I have come accross (I'm assuming that by positioning you mean absolute positioning):

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

Positioning pros:

定位优点：

• very precise positioning in relation to the next ancestor marked as position relative - allows for great flexibility
• allows for elements to be in a different order visually than they are in the DOM

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

Positioning cons:

定位缺点：

• Harder to line up with other elements since the positioned element is no longer in the document flow and also because of the level of precision required.
• Other elements ignore the absolutely positioned element which means you could have a potential overlap, unless you account for the minimum and maximum size of the positioned element
• harder to implement a footer if you are using absolute positioning for your columns.

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

Float pros:

浮动优点：

• really easy to construct simple and advanced layouts
• no footer problem
• no worrying about precision, browser takes care of that for you
• parent container stretches

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

Float cons:

浮动缺点：

• Lots of pitfalls for those less experienced with float layouts that may lead to many questions being asked on SO :)

• 对于那些不太熟悉浮动布局的人来说，有很多陷阱可能会导致在 SO 上提出许多问题:)

As to the clear:both element that Sebastian mentioned, There's a simple way around that. Lets say you have a container div and 2 floated divs inside.

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

Html:

网址：

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

CSS:

CSS：

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

if you were to run this code you would notice that the container div (the magenta coloured one) is only a single pixel high whereas the floated divs were correct - which is the problem Sebastian mentioned. Now you could take his advice and add a br or float the container which would not be very semantic - so here is a slightly more elegant solution. Just add overflow:hidden; to the container div like so:

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

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

Now your container should wrap the floated divs properly.

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

回答by Gabe

Well, if you're not too concerned with older browsers (I'm looking at you, IE6) the best way here is to go with

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

display:inline-block;

Basically, it creates a box-model element without clearing before or after it, so it remains in the line. Every modern browser interprets it well.

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

回答by Sebastian Hoitz

The parent container does not stretch with them unless it is also assigned a float tag or there is a br with clear:both; at the bottom.

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

I would go with the float:left instead of the positioning. The browser does all the aligning when one object stretches. So there is less for you to care about.

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

回答by rhinof

I think i wouldn't explicitly position the elements but rather instruct the browser to use an inline layout for the elements using display:inline and let the browser handle the positioning.

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

regarding float vs positioning i think the only way to line them up using positioning is by using absolute positioning, and that means you need to handle re-sizes(of the browser view port) in order to keep the elements in place.

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

I think that by using the float property the browser handles the re-sizing issues for you and re-renders the element in the correct place.

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

回答by Andrew G. Johnson

Only disadvantage to float in situations like this for me has been that you'll either need to left justify them or right justify them -- centering is not an option. However you've mentioned you're using absolute values for widths, so you could just nest all the floated elements in a DIV element and add either margin-right or margin-left to the parent DIV to simulate center alignment.

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