Mở rộng một div phụ huynh theo chiều ngang để phù hợp với trẻ em thả nổi của nó

Question

Tôi có một div cha với một số biến số div trẻ em có kích thước bằng nhau trôi nổi trái. Tôi muốn div cha mẹ mở rộng đến chiều rộng của trẻ em không có vấn đề gì, ngay cả khi nó có nghĩa là tràn container riêng của mình.

Có cách nào để thực hiện điều này một cách tự nhiên với HTML/CSS không?

Ví dụ (Các div căng ra sẽ gió lên là 180px rộng):

HTML:

<div id="stretchable-div"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    ... 
</div 

CSS:

.child { 
    width: 60px; 
    height: 60px; 
    float:left; 
} 

Answer 1

Trong ví dụ này các yếu tố căng-div sẽ phá sản ra khỏi mẹ, và kéo dài đến nó bọn trẻ.

Live Demo

css

#parent{ 
    width:200px; 
    height:180px; 
    background:red; 
} 

#stretchable-div{ 
    background:blue; 
    position: absolute; 
} 

.child { 
    width: 60px; 
    height: 60px; 
    float:left; 
} 

Markup

<div id="parent">Im a parent 
    <div id="stretchable-div"> 
     <div class="child">a</div> 
     <div class="child">b</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
     <div class="child">c</div> 
    </div> 
</div> 

Answer 2

bạn có thể thêm display: inline-block; cho phần tử cha. Để làm việc trong ie7, bạn cũng cần sử dụng display:inline;zoom:100%; để thay thế.

Vì vậy, một css có thể cho những gì bạn cần là thế này:

#stretchable-div { 
    background: none repeat scroll 0 0 red; 
    display: inline-block; 
    overflow: auto; /* clear the floats */ 
    *display:inline; /* ie7 hack even better use conditional comment */ 
    zoom:100%; 
} 

dụ:http://jsfiddle.net/8JJSf/

Answer 3

Cũng giống như @ dụ Pizzicato, nhưng sử dụng overflow:hidden để xóa phụ huynh div: http://jsfiddle.net/dSjv4/.

Có một bài viết tuyệt vời về cách định vị và xóa div trên Danh sách Ngoài here (gần cuối bài viết).