Как расположить несколько div'ов в ряд без использования стиля float?

Question

[Александр К]

Здравствуйте.
У меня такой вопрос: Как расположить div 'ы в ряд без использования "float:left"?
Если я использую float:left тогда смысл адаптивности страницы теряется, к ним начинают прилипать другие объекты на странице.
Может быть есть какой-нибудь мини скрипт или прием css?

Answer 1

[Иван Лещенко]

Дивы, которые нуно раместить в ряд, размещаем внутри блока со следующим css-правилом
display: table;

А самим дивам задаем
display: table-cell;

В чем плюс подхода: нету пробелов между блоками, все приемущества таблиц.

При этом в диве, который задан с display: table желательно больше ничего не располагать.
Это имитация таблиц на css для блочных элементов.
Можно сделать на родной таблице через элементы table, tr, td.

Почитайте просто свойства display: table, display: table-cell, display: table-row.

Comments

[smiros]

а при сужении экрана - они будут перестраиваться? (Извините может быть за нубский вопрос)

Answer 2

[Alexander Mischuk]

Почитайте про inline-block
jsfiddle.net/K699w

Answer 3

[Евгений Петров]

display:inline-block

Не понимаю, как может потеряться смысл адаптивности от одного правила.

Answer 4

[barkalov]

display: inline-block Но тогда у вас будут проблемы с пробелами (ширина которых зависит от font-size) между блоков - тот ещё геморрой.

Чтобы с float: left не было проблем, используйте clearfix.

Comments

[Евгений Петров]

rem и font-size спасут мир

[Евгений Петров]

@DonSinDRom а ещё есть flex...)

Answer 5

[Алексей Мерзляков]

<div class="card">
  <div class="card-block"></div>
  <div class="card-block"></div>
  <div class="card-block"></div>
</div>

.card{
  display: flex;
}
.card-block{
  width: 100px;
  height: 50px;
  border: 1px solid;
}

Answer 6

[Александр К]

Я не правильно использовал inline-block. Теперь разобрался, спасибо всем!