内联div元素

Question

我想把两个div元素放在一起，但即使有足够的空间让这两个元素在同一行上，其中一个新的div元素仍然会移到下一行。我需要只有在没有足够的空间时，另一个div元素才会移到下一行。

请问有谁知道如何做到这一点？

- Freesnöw

---

如果您需要通用的内联元素，应使用 span 元素。 - zzzzBov

Answer 1

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

这使元素保持块状功能，同时允许它以行内方式显示。它是两者之间的折衷方案。

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

- Spudley

---

请参阅http://www.ternstyle.us/blog/float-vs-inline-block以获取详细比较，并讨论与IE 7及更早版本的兼容性问题。 - George Cummins

Answer 2

标签是块级元素，因此默认情况下它们始终占据整行。要改变这种情况，可以使用浮动（float）来控制

标签的位置：

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

- George Cummins

---

要在新的一行开始下一个内联元素，请为该元素添加style="clear: both"样式。 - NGLN

OP说：“如果没有足够的空间，我只需要另一个div换行”。所以在这种情况下，不应该使用清除。不过，这是其他情况下的好建议。 - George Cummins

抱歉表述不够清晰；我的意思是指除了那些div之外的元素。可能OP在这些元素之外还有其他标记。;) - NGLN

inline-block不是更好的解决方案吗？浮动往往会变得非常混乱；清除容器，防止其他浮动出现问题，确保文本正确环绕它们... - DavidJCobb

这里有两种方法的详细比较：http://www.ternstyle.us/blog/float-vs-inline-block。每种方法都有其优缺点。对我来说，最有说服力的论点是IE 7及以下版本不能适当地处理inline-block。我经常发现处理浮动的后果比为IE 7和更早版本创建备用样式更容易。 - George Cummins

Answer 3

使用浮动和外边距（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>

在这个演示中，您可以看到：浮动、边距+浮动、display:inline-block。

演示在此处：http://jsfiddle.net/kuroir/UupbG/1/。

- MarioRicalde

Answer 4

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

- Matías Fidemraizer

Answer 5

请确保您的 div 具有固定的宽度

- Ahmed Magdy