Làm cách nào để hiển thị nhiều div trong một dòng nhưng vẫn giữ nguyên chiều rộng?

Question

Thông thường, bạn đặt các phần tử để hiển thị: nội tuyến nếu bạn muốn chúng hiển thị trong cùng một dòng. Tuy nhiên, thiết lập một phần tử thành inline nghĩa là thuộc tính width sẽ là vô nghĩa.

Làm thế nào để bạn thực hiện các div nằm trong cùng một dòng mà không làm cho chúng nằm trong nội tuyến?

Answer 1

Bạn có thể sử dụng display:inline-block.

Thuộc tính này cho phép phần tử DOM có tất cả các thuộc tính của phần tử khối, nhưng vẫn giữ nguyên nội tuyến. Có một số nhược điểm, nhưng hầu hết thời gian là đủ tốt. Why it's good and why it may not work for you.

EDIT: Các chỉ hiện đại trình duyệt có một số vấn đề với nó là IE7. Xem Quirksmode.org

Answer 2

Bạn có thể thả nổi các cột div bằng float: left; và cung cấp cho họ chiều rộng.

Và để đảm bảo không có nội dung nào khác của bạn bị rối tung lên, bạn có thể quấn các div được thả nổi trong div cha và cung cấp cho nó một số kiểu dáng nổi rõ ràng.

Hy vọng điều này sẽ hữu ích.

Answer 3

tôi đã sử dụng tài sản

display: table; 

và

display: table-cell; 

để đạt được same.Link fiddle dưới đây cho thấy 3 bảng bọc trong divs và những divs được gói hơn nữa trong một div cha mẹ

<div id='content'> 
    <div id='div-1'><!-- COntains table --></div> 
    <div id='div-2'><!-- contains two more divs that require to be arranged one below other --></div> 
</div> 

Đây là jsfiddle: http://jsfiddle.net/vikikamath/QU6WP/1/ Tôi nghĩ thi s có thể hữu ích cho ai đó đang tìm cách đặt div trong cùng một dòng mà không sử dụng display-inline