Elementy o równej wysokości z CSS

Question

Przeczytałem o kilku różnych rozwiązaniach do symulacji kolumn lub elementów o równej wysokości, ale żadna z nich nie przyciągnęła mojej uwagi, ponieważ używały one hacków, niesamowicie złożonych układów HTML lub niezbyt szeroko obsługiwanych atrybutów.

Oto przykład Fiddle.

Moim celem jest upewnienie się, że wszystkie elementy mają taką samą wysokość lub przynajmniej maksymalną wysokość rodzeństwa w rzędzie.

Wiersz składa się z 3 elementów (w tym przypadku nie istnieje opakowanie po wierszu, ale mogę rozważyć dodanie takiego elementu kontenera).

Czy istnieje rozwiązanie, które:

1. nie wymaga JS
2. doesn't use display: table
3. nie wykorzystuje szeroki dopełnienie/margines z wartościami ujemnymi
4. doesn't require exponential uses of divs and float

Answer 1

Z ograniczenia, które wprowadziłeś: Nie, nie ma.

edytuj: Ponieważ nie wspomniano o tym: można użyć do tego tabel. (witamy ponownie w latach 90.)

Answer 2

Można użyć do tego celu CSS3 flex. Napisz tak:

CSS 

.parent{ 
    display:-moz-box; 
    display:-webkit-box; 
    display:box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
    width:100%; 
    min-height:200px; 
} 

.parent div{ 
    background:red; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1; 
    border:2px solid green; 
} 

HTML

<div class="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    <div class="child">3</div> 
</div> 

Sprawdź to http://jsfiddle.net/VkPmg/2/

Answer 3

Jeśli masz układ szerokość fix, można udawać przez background-image. Wyobraź sobie tło obrazu, które symuluje granice, po prostu musisz powtórzyć-y w głównym kontenerze.

Na przykład, jeśli masz pojemnik 400px z pływającym 3 polem na 100px (jak twoje skrzypce), będziesz musiał powtórzyć obraz 1x400 w głównym pojemniku. Po prostu dodaj ten obraz w dobrej pozycji x 1 piksel wygląda jak kolor ramki, którego używałeś. I powtórz to!

Dzięki tej technice twoje pudełko nie będzie miało takiej samej wysokości (w rzeczywistości), ale wyświetlacz będzie wyglądał tak, jak pudełko, ponieważ wyższe pudełko popchnie pojemnik i pojawi się tło.