Trong CSS, tôi có thể xếp hàng cao độ của các khối nội tuyến không?

Question

Trong CSS, tôi có thể xếp hàng chiều cao của các khối nội tuyến không?

Tôi nghĩ bằng cách đặt lề thành 0 và chiều cao để tự động, khối sẽ mở rộng để vừa với không gian sẵn có, nhưng nó vẫn quấn chặt quanh khối.

.myclass { 
    display: inline-block; 
    margin: 0em; 
    padding: 1em; 
    height: auto; 
    border: solid; 
} 

http://jsfiddle.net/6NQDw/

Tôi muốn cả hai ô là cùng một chiều cao, nhưng muốn div chiều rộng/chiều cao được xác định bởi nội dung của họ, chứ không phải chỉ định một chiều rộng/chiều cao tính bằng pixel.

Có một số loại đệm/lề/liên kết CSS hoặc thứ gì đó mà tôi có thể sử dụng không?

Answer 1

Bạn có thể sử dụng display:table-cell; nếu bạn yêu cầu giải pháp CSS thuần túy nhưng lưu ý rằng nó sẽ không hoạt động trong IE7 (tôi đoán IE6 hiện đã bị lãng quên hoàn toàn).

.myclass { 
    display: table-cell; 
    margin: 0em; 
    padding: 1em; 
    height: auto; 
    border: solid; 
} 

Cross browser support for display:table-cell

đặt cược tốt nhất của bạn để đạt được những gì bạn cần là JavaScript tuy nhiên thiết lập một cách rõ ràng chiều rộng của container với nội dung động là hầu như luôn luôn sai đường.

Answer 2

Bạn có thể sử dụng display: table-cell; để làm cho các hộp khớp với chiều cao của nhau.

Answer 3

Nếu bạn muốn hỗ trợ cho IE7, bạn không thể sử dụng khối nội tuyến hoặc ô bảng.

Chỉ cần sử dụng phao: bên trái để an toàn ...

nếu không bạn sẽ sử dụng css riêng cho IE7.

Answer 4

Dễ dàng thêm bảng kiểu cho lte ie8, đặt lại thuộc tính của bạn để hiển thị: khối, phao: bên trái và tạo tổng chiều rộng trong tổng số 99% thay vì 100%. Điều này sẽ cung cấp cho bạn các chức năng cần thiết tất cả các cách trở lại.