Html 内联div元素

我试着把div元素放在一起。问题是，即使有足够的空间让两个元素在同一行，新的div也会移动到下一行，如果没有足够的空间，我只需要另一个div移动到下一行

---

有人知道怎么做吗？

使用

float

和

margin

；这样，当没有空间时，您可以将

overflow:hidden

放在

容器中

隐藏

div

的其余部分，而不是让它转到下一行

CSS HTML

内容
边栏

在这个演示中，您可以看到：浮动、边距+浮动、显示：内联块

---

此处演示：

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

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

您需要使用

float

CSS规则。只需使用一些类或标识符，并将

float

设置为

left

或

right

将CSS显示样式设置为

display:inline block

这允许元素保持其类似块的功能，同时也允许它以内联方式显示。这是一所介于两者之间的房子

（但请注意，与旧版本的IE存在一些兼容性问题）
确保您的
div
s
具有固定宽度，如果您需要通用内联元素，则应使用
span
元素。若要在新行上启动下一个内联元素，请向该元素添加style=“clear:tware”。OP说：“如果没有足够的空间，我只需要另一个部门转到下一行“因此，在这种情况下，不应使用清算。不过，对于其他情况，这是一个很好的建议；我指的是一个元素，而不是那个div。OP的标记可能比这些标记更多内联块不是更好的解决方案吗？花车往往相当凌乱；清除容器，防止其他浮动出现问题，确保文本正确环绕它们……下面是两种方法的详细比较：每种方法都有优点和缺点。对我来说，最有说服力的论点是IE7和更早版本没有适当地处理内联块。我经常发现处理浮动的后果比为IE 7和更早版本创建替代样式更容易。有关详细的比较，以及与IE 7和更早版本的兼容性问题的讨论，请参阅。
<div class="container">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
</div>

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