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/

1
Don Boots 18 sierpień 2014, 17:39

2 odpowiedzi

Najlepsza odpowiedź

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;
}

Przykład

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;
}

Przykład

Jeśli nie chcesz używać hacku rozmiaru czcionki, musisz skomentować przestrzeń w białej przestrzeni między swoim {x0}}

2
Pete 18 sierpień 2014, 14:12

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/

2
Guillermo Gutiérrez 18 sierpień 2014, 14:01