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