как установить div внутри div в столбцах

0

Мне нужен этот результат

Только с двумя 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>

спасибо

Теги:

4 ответа

1
Лучший ответ

Моим решением было бы использовать столбцы 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;
}

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

Поделиться
  • 0
    Спасибо за ответ. Я проголосовал за него. Ваше решение работает с IE?
  • 1
    Только IE10 + будет работать ..
3

Результат можно получить с помощью свойства 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;
}
Поделиться
  • 0
    Но как насчет IE?
  • 0
    flex пока не поддерживается в последней версии Safari. Я думаю, что мой лучше. Смотри мой ... =)
Показать ещё 3 комментария
0

Добавить float:left to .item

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

DEMO

Поделиться
  • 0
    Извините, что это неправильно :) Посмотрите на цифры, я хочу, чтобы они в правильном порядке ..
  • 0
    это то, что я думал. цифры идут слева направо, а не вверх и вниз
0

Измените ширину в .content class на 134px и добавьте float:left in .item class

Вот скрипка для этого Click Here

Поделиться
  • 0
    <br class='clear' /> добавляется после каждых двух div, чтобы сохранить высоту контейнера. В противном случае вам нужно изменить высоту в соответствии с вашими требованиями.
  • 0
    Прочитайте вопрос :) Мне нужны номера в тех же заказов

Ещё вопросы

Сообщество Overcoder
Наверх
Меню