Поширене рішення цієї проблеми використовує абсолютне позиціонування або обрізані поплавці, але вони складні в тому, що вони вимагають широкої настройки, якщо ваші стовпці змінюються за кількістю + розміром, і вам потрібно переконатися, що ваш "головний" стовпчик завжди довший. Натомість я б запропонував вам скористатися одним із трьох більш надійних рішень:
display: flex: на сьогоднішній день найпростіше та найкраще рішення та дуже гнучка - але не підтримується IE9 та старішими.tableабо display: table: дуже проста, дуже сумісна (майже кожен браузер коли-небудь), досить гнучка.display: inline-block; width:50% з відхиленням від’ємного поля: досить простий, але межі стовпців із нижньою стовпкою трохи складні.
1. display:flex
Це дійсно просто, і легко адаптуватися до більш складних або більш детальних макетів, - але флексбокс підтримується лише 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 + floats просто не найкращий спосіб зробити це (не кажучи вже про те, що кілька рівнів вкладених 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з поплавцями. Ви можете додати майже будь-яку кількість стовпців; ви можете мати автоматичне масштабування, якщо хочете; і ви зберігаєте сумісність із старовинними браузерами. На відміну від плаваючого рішення, вам також не потрібно заздалегідь знати, який стовпець є найдовшим; висота луски просто чудова.
KISS: не використовуйте поплавкові хаки, якщо вам спеціально цього не потрібно. Якщо 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. Зауважте, що крім вбудованих блоків, ви можете досягти подібного ефекту і з поплавцями.
TL; DR : використовуйте flexbox, якщо не можете ігнорувати IE9 та старіші версії ; інакше спробуйте таблицю (css). Якщо жоден із цих варіантів не працює для вас, є негативні маржі хакі, але це може спричинити дивні проблеми з відображенням, які легко пропустити під час розробки, і є обмеження у компонуванні, про які потрібно знати.