Обычное решение этой проблемы использует абсолютное позиционирование или обрезанные числа с плавающей запятой, но они хитры в том, что они требуют обширной настройки, если ваши столбцы меняются по числу + размеру, и что вам нужно убедиться, что ваш «основной» столбец всегда самый длинный. Вместо этого я бы предложил вам использовать одно из трех более надежных решений:
display: flex: безусловно, самое простое и лучшее решение и очень гибкое, но не поддерживается IE9 и старше.tableили display: table: очень простой, очень совместимый (почти во всех браузерах), довольно гибкий.display: inline-block; width:50% с взломом отрицательного поля: довольно просто, но границы столбца-дна немного хитры.
1. display:flex
Это действительно просто, и его легко адаптировать к более сложным или более подробным макетам - но flexbox поддерживается только в IE10 или более поздней версии (в дополнение к другим современным браузерам).
Пример: http://output.jsbin.com/hetunujuma/1
Соответствующий HTML:
<div class="parent"><div>column 1</div><div>column 2</div></div>
Соответствующее CSS:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox поддерживает гораздо больше опций, но для простого количества столбцов достаточно вышеприведенного!
2. <table>илиdisplay: table
Простой и чрезвычайно совместимый способ сделать это - использовать table- я бы рекомендовал вам сначала попробовать, если вам нужна поддержка старого IE . Вы имеете дело со столбцами; divs + float просто не лучший способ сделать это (не говоря уже о том, что множественные уровни вложенных div для простоты взлома ограничений css едва ли более «семантические», чем просто использование простой таблицы). Если вы не хотите использовать tableэлемент, рассмотрите cssdisplay: table (не поддерживается IE7 и более ранними версиями).
Пример: http://jsfiddle.net/emn13/7FFp3/
Соответствующий HTML: (но<table>вместо этогорассмотрите возможность использования простого)
<div class="parent"><div>column 1</div><div>column 2</div></div>
Соответствующее CSS:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Этот подход гораздо надежнее, чем использование overflow:hiddenс плавающей точкой. Вы можете добавить практически любое количество столбцов; Вы можете иметь их автоматическое масштабирование, если хотите; и вы сохраняете совместимость с древними браузерами. В отличие от плавающего решения, вам также не нужно заранее знать, какой столбец самый длинный; высота весы просто отлично.
ПОЦЕЛУЙ: не используйте хаки с плавающей точкой, если вам это не нужно. Если бы IE7 представлял собой проблему, я бы все равно выбрал простую таблицу с семантическими столбцами вместо трудно поддерживаемого, менее гибкого решения CSS-трюка в любой день.
Кстати, если вам нужно, чтобы ваш макет был отзывчивым (например, нет колонок на небольших мобильных телефонах), вы можете использовать @mediaзапрос, чтобы вернуться к простому блочному макету для небольшой ширины экрана - это работает, используете ли вы <table>или любой другой display: tableэлемент.
3. display:inline blockс отрицательной маркой взломать.
Другой альтернативой является использование display:inline block.
Пример: http://jsbin.com/ovuqes/2/edit
Соответствующий HTML: (отсутствие пробелов междуdivтегами является значительным!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
Соответствующее CSS:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
Это немного сложно, а отрицательное поле означает, что «истинное» дно столбцов скрыто. Это, в свою очередь, означает, что вы не можете расположить что-либо относительно нижней части этих столбцов, потому что это отрезано overflow: hidden. Обратите внимание, что в дополнение к встроенным блокам вы можете добиться аналогичного эффекта с помощью float.
TL; DR : используйте flexbox, если вы можете игнорировать IE9 и старше; в противном случае попробуйте таблицу (css). Если ни один из этих вариантов не работает для вас, существуют негативные взломы маржи, но они могут вызвать странные проблемы с отображением, которые легко пропустить во время разработки, и существуют ограничения макета, о которых вам необходимо знать.