Geek Answers Handbook

Positioned items are placed directly below each other.

I would like to display a series of tow divs next to each other, and in the next line, the next div is directly below the last. Like this:

enter image description here

Since the layout needs to be embedded in the CMS, I cannot put Box 1.3 and 2.4 in a div div. Is there any way to achieve this behavior without additional packaging elements? (The normal behavior of the float does not work, displaying inline / inline-block also does not do the trick.) Or is JavaScript needed to create a layout like this?

+5
source share
2 answers

- , CSS , , .

: css

jQuery - :

jQuery

:

enter image description here

+7

nth-child(odd) - clear float:left;.

CSS

.box {height:100px;width:100px;float:left;}
.box:nth-child(odd) {clear:left;}
.green {background:green;}
.red{background:red;}
.blue {background:blue;}
.yellow {background:yellow;}

HTML

<div class="box green">BOX 1</div>
<div class="box red">BOX 2</div>
<div class="box blue">BOX 3</div>
<div class="box yellow">BOX 4</div>

: http://jsfiddle.net/YSP2S/

, Internet Explorer. javascript -.

+6

More articles:


All Articles