Wspólne rozwiązanie tego problemu wykorzystuje pozycjonowanie bezwzględne lub przycięte zmiennoprzecinkowe, ale są one trudne, ponieważ wymagają obszernego dostrajania, jeśli liczba kolumn zmienia się pod względem liczby i rozmiaru, i że musisz upewnić się, że kolumna „główna” jest zawsze najdłuższa. Zamiast tego sugeruję użycie jednego z trzech bardziej niezawodnych rozwiązań:
display: flex: zdecydowanie najprostsze i najlepsze rozwiązanie oraz bardzo elastyczne - ale nieobsługiwane przez IE9 i starsze.tablelub display: table: bardzo prosty, bardzo kompatybilny (prawie każda przeglądarka kiedykolwiek), dość elastyczny.display: inline-block; width:50% z hackowaniem marginesów ujemnych: dość proste, ale obramowanie dolnej kolumny jest trochę trudne.
1. display:flex
Jest to naprawdę proste i łatwe do dostosowania do bardziej złożonych lub bardziej szczegółowych układów - ale Flexbox jest obsługiwany tylko przez IE10 lub nowszą wersję (oprócz innych nowoczesnych przeglądarek).
Przykład: http://output.jsbin.com/hetunujuma/1
Odpowiedni HTML:
<div class="parent"><div>column 1</div><div>column 2</div></div>
Odpowiednie css:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox obsługuje wiele innych opcji, ale wystarczy mieć dowolną liczbę kolumn, wystarczy powyższe!
2. <table>lubdisplay: table
Prostym i niezwykle kompatybilnym sposobem na wykonanie tego jest table- polecam najpierw spróbować, jeśli potrzebujesz obsługi starego IE . Masz do czynienia z kolumnami; divs + float po prostu nie jest najlepszym sposobem na zrobienie tego (nie wspominając o tym, że wiele poziomów zagnieżdżonych div tylko po to, by włamać się do ograniczeń css, nie jest bardziej „semantyczne” niż zwykła tabela). Jeśli nie chcesz używać tego tableelementu, rozważ cssdisplay: table (nieobsługiwany przez IE7 i starsze).
Przykład: http://jsfiddle.net/emn13/7FFp3/
Odpowiedni HTML: (ale<table>zamiast tegorozważ użycie zwykłego)
<div class="parent"><div>column 1</div><div>column 2</div></div>
Odpowiednie css:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
To podejście jest znacznie bardziej niezawodne niż w overflow:hiddenprzypadku pływaków. Możesz dodać prawie dowolną liczbę kolumn; możesz je skalować automatycznie, jeśli chcesz; i zachowujesz zgodność ze starymi przeglądarkami. W przeciwieństwie do rozwiązania typu float, nie musisz wcześniej wiedzieć, która kolumna jest najdłuższa; wysokość dobrze się skaluje.
KISS: nie używaj haków pływakowych, chyba że potrzebujesz. Jeśli IE7 stanowi problem, nadal wybieram zwykłą tabelę z kolumnami semantycznymi zamiast trudnego w utrzymaniu, mniej elastycznego rozwiązania trick-CSS każdego dnia.
Nawiasem mówiąc, jeśli potrzebujesz, aby układ był responsywny (np. Brak kolumn na małych telefonach komórkowych), możesz użyć @mediazapytania, aby powrócić do zwykłego układu bloków dla małych szerokości ekranu - działa to niezależnie od tego, czy używasz, <table>czy innego display: tableelementu.
3. display:inline blockz ujemnym włamaniem do marginesu.
Inną alternatywą jest użycie display:inline block.
Przykład: http://jsbin.com/ovuqes/2/edit
Odpowiedni html: (brak spacji międzydivznacznikami jest znaczący!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
Odpowiednie 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;
}
Jest to nieco trudne, a ujemny margines oznacza, że „prawdziwy” dół kolumn jest zasłonięty. To z kolei oznacza, że nie możesz ustawić niczego względem dołu tych kolumn, ponieważ jest to odcięte overflow: hidden. Pamiętaj, że oprócz bloków wbudowanych możesz osiągnąć podobny efekt za pomocą pływaków.
TL; DR : użyj Flexboksa, jeśli możesz zignorować IE9 i starsze; w przeciwnym razie wypróbuj tabelę (css). Jeśli żadna z tych opcji nie jest dla ciebie odpowiednia, występują hacki o ujemnym marginesie, ale mogą powodować dziwne problemy z wyświetlaniem, których łatwo przeoczyć podczas programowania, i istnieją ograniczenia dotyczące układu, o których musisz pamiętać.