How to make line break between divs inside a box?

Here is an example:

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

and css:

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

When I run the code, the two divs go side by side, although there are line breaks. How to get line breaks to work?

+3
source share
1 answer

That which bractually has nothing to do. What you need is not a line break.

You must specify -webkit-box-orient: vertical;. This is the default value horizontal, so you see this result.

Warning

In fact, you are using an obsolete function that was later replaced by flex.

Cannot be used display: box.

flex W3C, , . .

flex, :

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

jsFiddle

+4

All Articles