Mam stół, który ma różne komórki o różnych szerokościach, które ukrywają / pokazują na podstawie przełączania użytkownika. Chciałbym, aby kontenerowy DIV do rozszerza się z kolumnami.
Myślałem o zapętleniu przez $('.row').first().find('.cell') i obliczanie / talying szerokości i ustawiając taką szerokość #container, ale miało nadzieję na lepsze rozwiązanie.
Na sidenote, ponieważ .cell divs to float: left, chciałbym określić wysokość dla mojego {x2}} lub użyj display: inline-block?
HTML
<div id="container">
<div class="row">
<div class="sm-cell cell cell-1">1</div>
<div class="md-cell cell cell-2">2</div>
<div class="sm-cell cell cell-3">3</div>
<div class="sm-cell cell cell-4">4</div>
<div class="sm-cell cell cell-5">5</div>
<div class="md-cell cell cell-6">6</div>
<div class="lg-cell cell cell-7">7</div>
</div>
<div class="clear"></div>
</div>
CSS
.clear { clear: both; }
.row {
margin: 1px 0;
}
.cell {
float: left;
text-align: center;
background: #999999;
padding: 2px;
}
Interaktywny jsfiddle
http://jsfiddle.net/dboots/uenz4hee/2/
2 odpowiedzi
Możesz użyć display:table
#container {
display:table;
background: #DEDEDE;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
float: left;
text-align: center;
background: #999999;
padding: 2px;
cursor: pointer;
border-bottom:1px solid #DEDEDE;
}
Oznacza również, że możesz pozbyć się swoich jasnych div
AKTUALIZACJA
Jeśli chcesz, aby komórki nie były opakowane, gdy rozmiar ekranu jest zbyt mały, możesz użyć display:inline-block zamiast:
#container {
display:inline-block;
background: #DEDEDE;
}
.row {
margin: 1px 0;
white-space:nowrap;
font-size:0; /* this is to stop the space between cells */
}
.cell {
font-size:10px; /* this should be set to your original font-size */
white-space:normal;
display:inline-block;
text-align: center;
background: #999999;
padding: 2px;
cursor: pointer;
}
Jeśli nie chcesz używać hacku rozmiaru czcionki, musisz skomentować przestrzeń w białej przestrzeni między swoim {x0}}
Pójdę z wyświetlaczem inline-block dla każdej komórki:
.cell {
display:inline-block; /* <--- */
text-align: center;
background: #999999;
padding: 2px;
cursor: pointer;
}
Tak więc zachowuje się jak tekst i ustaw wiersz jako nowrap, unikając rozbicia zawartości w nowych liniach, a zamiast tego rozszerzając zawierające div Accordig:
.row {
margin: 1px 0;
white-space: nowrap; /* <--- */
}
Sprawdź to skrzypce: http://jsfiddle.net/3ofejh58/1/