[CSS] dispay: table-cell wypełniający dostępną przesztrzeń

Dla specjalistów Webmastering
#1

Jaki ustawić styl, aby:

wszystkie .jed były ułożone w równą(pod względem szerokości) kolumnę.

.dwa wypełniały dostępną szerokość.

.trzy działały tak jak .jed

.kon nie ma ustalonej stałej szerokości.

 

Styl .dwa { width: 100% } rozgniata .jed i .trzy, więc odpada.

Odpowiada mi również dispay: flex, jeśli by się dało to uzyskać jego pomocą.

.kon {
  display: table-row;
}

.kon div {
  display: table-cell
}

<div class="kon">
  <div class="jed"></div>
  <div class="dwa"></div>
  <div class="trzy"></div>
</div>
<div class="kon">
  <div class="jed"></div>
  <div class="dwa"></div>
  <div class="trzy"></div>
</div>
<divclass="kon">
  <div class="jed"></div>
  <div class="dwa"></div>
  <div class="trzy"></div>
</div>
#2

Po pierwsze - stosuj angielskie nazewnictwo, to zawsze dobra praktyka.

 

Po drugie - o co ci chodzi? Układ kolumnowy? Zainteresuj się bootstrapem. Układ kafelkowy? Popatrz na np. masonry.

#3

Ustaw float left i right dla jed i trzy oraz nadaj im minimalną procentową wartość szerokość.

Dla dwójki ustaw minimalną, pozostałą szerokość po odjęciu z bocznych kontenerów.

Kon(tenerowi) nadaj czyszczenie opływania.

 

Powinno zagrać od ręki.

#4

Dla .kon zamiast display:table-row daj display:table i jakąś szerokość (np. width:100%)

 

Działająca wersja