如何在列中的div内设置div

Question

I need to have this result

With only two DIVS like the code below

Here is the fiddle to work

EDIT

Based on Sowmya answer (which is wrong) please notice that I need the numbers to be in the same orders

.content{
    padding:10px;     
    width:282px;
    height:90px;
    border:solid 1px #444;
}
.item{
    padding:5px;
    margin-right:5px;
    width:50px;
    border:solid 1px #999;
}

<div class="content">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>  
    <div class="item">12</div>  
</div> 

Thank you

Answer 1

You can achieve the result using the CSS3 flex property.

Here is the DEMO .

.content{
    padding:10px;     
    width:282px;
    height:105px; /*Height need to change*/
    border:solid 1px #444;
    display: flex;
    flex-flow: column wrap;
}
.item{
    padding:5px;
    margin-right:5px;
    width:50px;
    border:solid 1px #999;
}

Answer 2

My solution would be to use CSS3's Columns. (Sorry I had to play around with the widths and heights) =)

.content{
    padding:10px;     
    width:285px;
    height:105px;
    border:solid 1px #444;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
}
.item{
    padding:5px;
    margin: 0 0 5px;
    width:50px;
    border:solid 1px #999;
}

http://jsfiddle.net/2gM2d/45/

Answer 3

Add float:left to .item

.item{
    padding:5px;
    margin-right:5px;
    width:50px;
    border:solid 1px #999;
    float:left
}

DEMO

Answer 4

Change width in .content class to 134px and add float:left in .item class

Here is a fiddle for this Click Here