水平地展開一個父div以適合其浮動的子女

我有一個父div，其中包含大小相等的子div浮動的可變數目。無論如何，我都希望父級擴展到子級的寬度，即使它意味着溢出自己的容器。水平地展開一個父div以適合其浮動的子女

有沒有一種方法可以自然地用HTML/CSS來做到這一點？

例（伸縮性格將被清盤180像素寬）：

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; 
}

來源

2011-03-14 Yarin

你最終搞清楚如何做到這一點？ –

好吧，看起來最簡單的方法是使用JavaScript來動態增加/減少容器元素的寬度，在父元素溢出的情況下。 –

在這個例子中，拉伸-div元素將出局其父，並延伸到其兒童。

Live Demo

CSS

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

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

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

標記

<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>

來源

2011-03-14 19:04:47 Loktar

@ Loktar-謝謝，但我有兩個問題 - 請參閱我的修改版本的示例：http://jsfiddle.net/seB5F/12/ 1）當我添加更多元素或向右推絕對div時，元素開始包裹在邊框上。 2）我還添加了overflow：隱藏到父div，但仍然看到所有可伸展的div。爲什麼我不能將可伸展的div拉伸到寬度，並且隱藏了任何溢出？你能解釋一下嗎？ – Yarin

好的，回答第一個問題，它的原因在於絕對位置，它將它從文檔流中提取出來，所以這就是爲什麼溢出對可伸展div沒有影響，將其更改爲相對和其隱藏 – Loktar

@ Loktar-您回答了我的問題，但我仍然有一個問題 - 我想要隱藏溢出。要做到這一點，我需要使容器位置：相對，但這會導致內容包裝。有任何想法嗎？ – Yarin

可以爲添加display: inline-block;父元素。要在ie7中工作，您還需要使用display:inline;zoom:100%;。

所以對於你所需要的可能的CSS是這樣的：

#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%; 
}

例如：http://jsfiddle.net/8JJSf/

來源

2011-03-14 18:57:57 Sotiris

@ Sotiris-謝謝，但你的例子不會讓父div溢出它的容器。見http://jsfiddle.net/8JJSf/4/。 – Yarin

@Yarin正確，溢出容器它也需要'position：absolute' for'＃stretchable-div' – Sotiris

@ Sotiris-可以，但是你不需要顯示：block-inline，對不對？ – Yarin

就像@撥絃的例子，但使用overflow:hidden清除父母div：http://jsfiddle.net/dSjv4/。

這裏有一篇關於定位和清理div列表的文章，除了here（接近文章的結尾）。

來源

2011-03-14 19:13:55

@ Nathan-謝謝，但是你的例子不允許父div溢出它的容器。見http://jsfiddle.net/dSjv4/14/ – Yarin

水平地展開一個父div以適合其浮動的子女

回答

相關問題