如何在框内的div之间进行换行？

Question

这是一个例子：

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

和css：

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

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

Answer 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