如何在盒子内的 div 之间换行？

Posted 2023-03-07

【中文标题】如何在盒子内的 div 之间换行？

【英文标题】：How do I make a line break between divs inside a box?

【发布时间】：2014-03-10 01:52:19

【问题描述】：

这里是一个例子：

<div id=main>
<div>One</div><br>
<div>Two</div>
</div>

和css：

#main
display:-webkit-box;
-webkit-box-direction: reverse;

当我运行代码时，两个 div 并排运行，即使有换行符。如何让换行符起作用？？？？

【问题讨论】：

既然你想让这些显示在另一个之上，你为什么使用display: -webkit-box？使用普通显示器，它们会随心所欲地出现。

【参考方案1】：

br 在那里并没有真正的不同。您需要的不是换行符。

您必须指定-webkit-box-orient: vertical;。它的默认值为horizontal，这就是您看到此结果的原因。

警告

实际上你使用的是一个过时的功能，后来被flex取代。

你不应该使用display: box。

flex 目前是 W3C 候选推荐，并且很稳定，因此您应该改用那个。 Every current browser has support for it.

使用flex 你可以这样做：

#main
    display: flex;
    flex-direction: column-reverse;

jsFiddle

【讨论】：

flex 在 Safari 中不起作用。 （顺便说一句，我整天都在为此工作，你的回答对我帮助很大。）

@ENM185 取决于 Safari 的版本。无论如何，Chris Coyier 有一篇很好的文章，介绍了混合 2 个过时的 (box, flexbox) 和当前 (flex) 模型并实现最大可能的浏览器支持：css-tricks.com/using-flexbox