Question

我正在尝试将div元素放在彼此旁边。问题是，即使有足够的空间让两个元素在同一条线上，新的div也会移动到下一行，如果没有足够的空间，我需要另一个div才能进入下一行

有人知道怎么做吗？

Answer 1

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

这允许元素保持其类似块的功能，同时还允许它以内联方式显示。这是两者之间的中途。

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

Answer 2

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

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

Answer 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>

在本演示中，您可以看到：浮点数，边距+浮点数，显示：内联块。

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

Answer 4

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

Answer 5

确保您有div的固定宽度

内联div元素

5 个答案:

CSS

HTML