Мне нужен этот результат
Только с двумя DIVS
такими как код ниже
Вот скрипка для работы
РЕДАКТИРОВАТЬ
На основании ответа Sowmya
(что неверно), пожалуйста, обратите внимание, что мне нужны номера, которые будут в тех же заказах
.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>
спасибо
Моим решением было бы использовать столбцы CSS3. (Извините, мне пришлось поиграть с шириной и высотой) =)
.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;
}
Результат можно получить с помощью свойства CSS3 flex
.
Вот ДЕМО.
.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;
}
flex
пока не поддерживается в последней версии Safari. Я думаю, что мой лучше. Смотри мой ... =)
Добавить float:left
to .item
.item{
padding:5px;
margin-right:5px;
width:50px;
border:solid 1px #999;
float:left
}
Измените ширину в .content
class на 134px
и добавьте float:left
in .item
class
Вот скрипка для этого Click Here