2012-04-08 28 views
9

Đây là vấn đề nhỏ của tôi (giá trị chỉ vào đây để ví dụ):Mở rộng chiều rộng div dựa trên con của nó rộng

phép nói rằng tôi có một cửa sổ có chiều rộng khoảng 500px. Bên trong tài liệu của tôi, tôi có một div bên ngoài không có chiều rộng nhất định, nhưng css sau:

.outer{ 
    white-space:nowrap; 
    background:blue; 
} 

Bên div này là 3 div khác có các thuộc tính sau:

.t1{ 
    display:inline-block; 
    width:400px; 
} 

(chú ý . chiều rộng của 400px đó là nơi mà vấn đề là, dòng rộng hơn cửa sổ, và các div bên ngoài không mở rộng HTML trông như thế:.

<div class="outer"> 
    <div class="t1">1</div> 
    <div class="t1">2</div> 
    <div class="t1">3</div> 
</div> 

Những gì tôi đang cố gắng đạt được là có 3 div bên trong với một nền màu xanh, mà không cần thiết lập nó cho lớp t1. Ví dụ này sẽ tạo ra một nền màu xanh được giới hạn ở độ rộng của cửa sổ.

Xem ví dụ đầy đủ ở đây: http://jsfiddle.net/sjCTR/ (bạn sẽ phải thích ứng với góc dưới bên trái màn hình của bạn là lớn)

Tôi tự hỏi nếu bằng cách nào đó mà có thể đạt được qua css/chỉ html, mà không cần thiết chiều rộng div bên ngoài/nền div bên trong?

+0

Không chắc tôi hiểu vấn đề của bạn. Bạn đang cố gắng buộc chiều rộng của mỗi '.t1' luôn luôn là 400px hoặc luôn luôn 33% hoặc cái gì khác? – Godwin

+0

Không, Số tôi đưa vào đây chỉ có trong ví dụ. Vấn đề là phức tạp hơn, nhưng ý tưởng là chiều rộng của div bên ngoài sẽ không phát triển để phù hợp với chiều rộng con của nó. –

Trả lời

22

Thêm float: left hoặc display: inline-block to .outer.

+3

Cảm ơn bạn rất nhiều. Cả hai đều đang làm việc. Bạn có thể giải thích làm thế nào là ma thuật đó có thể (tôi có nghĩa là tại sao thêm rằng để bên ngoài làm cho nó mở rộng)? –

+1

Bạn đã cứu tôi khỏi những giờ đau đầu – Bruce

0

thêm tràn: bị ẩn; chiều rộng: 100%; đến bên ngoài

Các vấn đề liên quan