CSS: Cha mẹ-Div không phát triển với con của nó (ngang)

Tôi muốn bố mẹ-div (màu đỏ) phát triển với màu xanh lá cây con-div. Bây giờ nó chỉ dừng lại ở chế độ xem.CSS: Cha mẹ-Div không phát triển với con của nó (ngang)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
<head> 
<title>simple document</title> 
<style type="text/css"> 
* { 
    font-family: verdana; 
    margin: 0px; 
    padding: 0px; 
} 
</style> 
</head> 
<body> 
<div style="margin: 30px; background: red; padding: 10px;"> 
<div style="background: green; width: 2000px;">dxyf</div> 
</div> 
</body> 
</html>

Tôi không muốn sử dụng display: table; vì nó không hoạt động tốt trong IE.

Bất kỳ ý tưởng nào?

Nguồn

2010-03-30 vyden_st

Tại sao không đặt div 2000 pixel cho bố mẹ? Cần làm việc. – Joop

@Joop Rõ ràng là anh ta muốn chiều rộng của phụ huynh phụ thuộc vào chiều rộng con (có thể thay đổi tùy theo nội dung) –

Đúng vậy :) –

Sử dụng display: inline-block; trên phụ huynh <div> và nó sẽ làm việc như mong đợi

Nguồn

2010-03-30 13:07:33

Vâng! Thật tuyệt! Cảm ơn bạn, tôi không bao giờ nghĩ rằng điều này sẽ làm việc trong IE quá - chỉ học được một cái gì đó hữu ích! –

Quirksmode (http://www.quirksmode.org/css/display.html) nói rằng bạn không thể sử dụng hiển thị 'inline-block' trên các phần tử không mặc định là' display: inline' cho IE 6 và 7. Bạn đã thử nghiệm nó chưa? –

@Alex Đúng, nhưng đây là giải pháp tư duy chuyển tiếp tuân thủ tiêu chuẩn. Để giải quyết các trình duyệt cũ hơn, các chú thích có điều kiện có thể được sử dụng để áp dụng 'float' cho phần tử cha (nếu cần). –

Làm cho cha mẹ div float: left; và nó sẽ được mở rộng như mong muốn.

Nguồn

2010-03-30 13:10:31 Paul

Trong FF2 điều này sẽ không hoạt động _properly_ - đứa trẻ lớn hơn cha mẹ .. làm sao chúng ta có thể giải quyết được điều này? Rõ ràng đây là do lề của cha-div. –

Bạn sẽ cần một phần tử rõ ràng hoặc bạn có thể sử dụng giải pháp quirksmode được đăng bên dưới. – UpTheCreek

Tôi biết tôi đến muộn, nhưng đây là những gì tôi làm gì để khắc phục vấn đề:

Thêm rõ ràng INSIDE phụ huynh ở phía dưới, và làm cho tràn mẹ: ẩn.

Dưới đây là các mã chỉnh sửa:

.clear{ 
    clear: both; 
    /* make sure there is no height set to it */ 
    line-height: 0; 
    height: 0; 
    font-size: 0em; 
} 

<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;"> 
<div style="background: green; width: 2000px;">dxyf</div> 
<div class="clear">/div> 
</div>

trình trong FF3 và IE7, nhưng chưa được thử nghiệm trong các trình duyệt khác mặc dù.

Hy vọng, ít nhất, giúp bạn giải quyết vấn đề của mình.

Nguồn

2010-06-01 15:34:17

Xem this solution từ quirksmode.org. Rất đơn giản, chỉ áp dụng lớp này cho vùng chứa/div cha:

div.container { 
    overflow: hidden; 
    width: 100%; 
}

Nguồn

2010-11-13 09:35:48 UpTheCreek

Sử dụng display: table; trên div cha. Hoặc bạn có thể đặt div cha vào một ô của bảng.

Nguồn

2011-03-06 08:45:56 Bang

Có quá nhiều lời khuyên phức tạp ở đây. Đây là một mẹo: thay vì tinkering với các ô bảng, và rõ ràng và nổi, chỉ cần đảm bảo rằng con có một đường viền tương đương với padding mà bạn đang tìm kiếm cha mẹ. Biên giới luôn luôn được rút ra bên ngoài, vì vậy nó sẽ làm những gì bạn muốn.

này nên làm việc ...

<div style="margin: 30px; background: red;"> 
<div style="background: green; width: 2000px; border: 10px red solid">dxyf</div> 
</div>

... trong tất cả các trình duyệt, mà không có một vấn đề. HTH.

Nguồn

2012-05-14 04:16:52 PKHunter

Đặt vị trí gốc cho người thân và con thành Absolute

Nguồn

2013-10-10 06:12:41

CSS: Cha mẹ-Div không phát triển với con của nó (ngang)

Trả lời

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