内联 div 元素答案

【问题标题】：Inline div elements内联 div 元素
【发布时间】：2011-05-20 13:26:07
【问题描述】：

我正在尝试将 div 元素并排放置。问题是，即使有足够的空间让两个元素在同一行，新的 div 也会移动到下一行，如果没有足够的空间，我只需要另一个 div 去下一行.

有人知道怎么做吗？

【问题讨论】：

如果你需要通用的内联元素，你应该使用span元素。

标签： html inline

【解决方案1】：

将 CSS 显示样式设置为display:inline-block;。

这允许元素保持它的块状功能，同时也允许它内联显示。这是两者之间的中途之家。

（但请注意，与旧版本的 IE 存在一些兼容性问题）

【讨论】：

查看ternstyle.us/blog/float-vs-inline-block 了解详细比较，以及与 IE 7 及更早版本的兼容性问题的讨论。

【解决方案2】：

Div 是块级元素，因此默认情况下它们总是占据一整行。改变这种情况的方法是浮动 div：

<div style="float: left"></div>

【讨论】：

要在新行上开始下一个内联元素，请将 style="clear: both" 添加到该元素。
OP 说：“如果没有足够的空间，我只需要另一个 div 去下一行”所以在这种情况下，不应该使用清除。不过，这对于其他情况来说是个好建议。
抱歉不清楚；我的意思是一个元素，而不是有问题的div。可能 OP 有更多的标记。 ;)
内联块不是更好的解决方案吗？花车往往很乱。清理容器，防止其他浮动出现问题，确保文本正确环绕它们......
以下是两种方法的详细比较：ternstyle.us/blog/float-vs-inline-block 各有利弊。对我来说，最有说服力的论点是 IE 7 及更早版本没有适当地处理 inline-block。我经常发现处理浮动的后果比为 IE 7 和更早版本创建替代样式更容易。

【解决方案3】：

使用float 和margin；这样，当没有空间时，您可以将overflow:hidden 放入container 隐藏div 的其余部分，而不是将其转到下一行。

CSS

.container {
  width:500px;
  background:#DADADA;
  overflow:hidden; /* also used as a clearfix */
}

.content {
  float:left;
  background:green;
  width:350px;
}
.sidebar {
  width:155px; /* Intentionaly has more width */ 
  margin-left:350px; /* Width of the content */
  background:lime;
}

HTML

<div class="container">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
</div>

在这个演示中你可以看到：floats、margin+floats、display:inline-block。

在这里演示：http://jsfiddle.net/kuroir/UupbG/1/

【讨论】：

【解决方案4】：

您需要使用float CSS 规则。只需使用一些类或标识符并将float 设置为left 或right。

【讨论】：

【解决方案5】：

确保divs 的宽度固定

【讨论】：