Какие техники используете для горизонтального расположения блоков в CSS?

Question

[modfop]

Здравствуйте, господа верстальщики.

Вопрос в заголовке. Нужна поддержка в браузерах IE9+, последние версии Chrome, FF, Opera, Safari включая мобильные версии (Android, iOS).
Я сам знаю три основные техники:
1) С помощью свойства "float: left (right)" как самая распространенная, все минусы и плюсы знаю. С этим методом в принципе все понятно.
2) С помощью свойства "dislpay: inline-block". С этим тоже все ясно включая плюсы и минусы.
3) С помощью свойства "display: table" для родителя и "display:table-cell" для прямых потомков (то есть те самые блоки которых надо расположить горизонтально рядом друг с другом). Вот хотелось бы узнать по подробнее про минусы и плюсы этого метода.

Есть ли еще другие хорошие методы? Какие методы вы сами чаще используете в конкретных ситуациях?

Answer 1

[Сергей delphinpro]

3) тут основной минус в том, что ячейки таблицы (даже заданные через display:table-cell) не могут быть relative, а это иногда нужно. Приходится добавлять лишние внутренние обертки.
Второй, не менее значимый - ячейки таблицы не могут быть перенесены на след строку, что в эпоху адаптивного дизайна не хорошо.
Однако эти минусы, понятное дело, не всегда имеют значение. Так что если метод решает задачу - используйте.
Из плюсов - простое вертикальное выравнивание, если требуется.

Answer 2

[Сергей]

На мой взгляд самый топовый метод это display: flex. Он покрывает колоссальный объем задач

Comments

[Сергей delphinpro]

В вопросе однозначно написано - "Нужна поддержка в браузерах IE9+". Так что мимо.

[Сергей]

Сергей: Можно поинтересоваться почему с 9 если поддержка ие происходит с 11

[Сергей delphinpro]

Сергей: Можно. Поинтересуйтесь у modfop =)
(Наверное так в ТЗ написано. А с тех. заданием не поспоришь)

[modfop]

Сергей: допустим что это требование клиента, но это уже другая история

Answer 3

[Anton fon Faust]

ie9 прекрасно поддерживает calc, можно это дело использовать для обеспечения горизонтального расположения.
Кастыль, но работает)

Comments

[modfop]

а как именно?)

Answer 4

[weranda]

• inline
  
• block
  
• table
  
• flex
  
• grid
  
• и еще, если память не изменяет, есть какой-то для иероглифов
  

Мне с головой хватает пока блочной модели. Конечно, хорош flex, но для некоторых проектов, требующих поддрежку IE, к сожалению, не подходит.

Answer 5

[Александр Пупкин]

Masonry