Các phần tử chiều cao bằng CSS

Question

Tôi đọc về một số giải pháp khác nhau để mô phỏng các cột hoặc các phần tử có chiều cao bằng nhau, nhưng không ai trong số chúng thực sự thu hút sự chú ý của tôi bởi vì chúng đang sử dụng hack, bố cục HTML cực kỳ phức tạp hoặc không được hỗ trợ rộng rãi.

Đây là ví dụ Fiddle.

Mục tiêu của tôi là đảm bảo tất cả các phần tử có cùng độ cao hoặc, ít nhất, chiều cao tối đa của các anh chị em trong hàng.

Hàng được cấu thành bởi 3 phần tử (trong trường hợp này, không có trình bao bọc hàng tồn tại nhưng tôi có thể xem xét thêm phần tử vùng chứa đó).

Có một giải pháp mà:

1. không yêu cầu JS
2. doesn't use display: table
3. không sử dụng đệm rộng/lợi nhuận với giá trị âm
4. doesn't require exponential uses of divs and float

Answer 1

Với những hạn chế bạn đã thực hiện: Không, không có.

chỉnh sửa: Bởi vì bạn không đề cập đến điều này: Bạn có thể sử dụng bảng cho việc này. (chào mừng trở lại những năm 90)

Answer 2

Bạn có thể sử dụng thuộc tính CSS3 flex cho việc này. Viết như thế này:

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> 

Kiểm tra này http://jsfiddle.net/VkPmg/2/

Answer 3

Nếu bạn có một bố trí chiều rộng cố định, bạn có thể giả mạo nó bằng background-image. Hãy tưởng tượng một nền hình ảnh gạch mô phỏng biên giới, bạn sẽ chỉ phải lặp lại y trong vùng chứa chính.

Ví dụ: nếu bạn có vùng chứa 400px có hộp nổi 3 100px (như hình tròn của bạn), bạn sẽ phải lặp lại hình ảnh 1x400 trong vùng chứa chính. Chỉ cần thêm vào hình ảnh này ở vị trí x tốt 1 pixel giống như màu đường viền mà bạn đã sử dụng. Và lặp lại nó!

Với kỹ thuật này, hộp của bạn sẽ không có cùng chiều cao (trên thực tế) nhưng màn hình sẽ giống như hộp có nó vì hộp cao hơn sẽ đẩy vùng chứa và nền sẽ xuất hiện.