如何包裝3個浮動div的絕對div

基本上我有一個容器設置爲絕對定位，爲此我無法設置寬度或高度...因此它需要自動環繞內容。如何包裝3個浮動div的絕對div

但是，在絕對div中，有3個div被設置爲「float：left」，這樣它們就會堆疊在彼此旁邊。

一旦我將父級設置爲絕對定位，則3個內部div會跳下來，而父級div不會環繞它們。

有沒有可能？所以，我可以換一個絕對股利，約3名漂浮者（並排）

來源

2012-04-25 CK-idiot

你清理左邊的浮子嗎？ – Umair 2012-04-25 16:33:36

適用溢出：隱藏於母公司的股利

來源

2012-04-25 16:30:50 squarephoenix

確保您使用的是清晰的元素之後的花車（withing你的腹部位置DIV）

Here is the Fiddle for it

CSS：

.left{ 
float:left 
} 
.clearL{ 
height:1px; 
margin-bottom:-1px; 
clear:left; 
} 
#wrapper 
{ 
padding:5px; 
background-color:#e37c00; 
}

HTML：

<div id="wrapper"> 
    <div id="divOne" class="left"> 
     <p>Some content goes here...</p> 
    </div> 
    <div id="divTwo" class="left"> 
     <p>Some content goes here...</p> 
    </div> 
    <div id="divThree" class="left"> 
     <p>Some content goes here...</p> 
    </div> 
    <div class="clearL"> 
    </div> 
<div/>

來源

2012-04-25 16:40:50 TNCodeMonkey

儘管這可能有效，但它比操作問題所需要的複雜得多。另外，在你的例子中，你並沒有將絕對定位應用於包裝。 – Madbreaks 2012-04-25 16:46:26

@Madbreaks不明白爲什麼會這麼複雜，有幾個類和相同的html。此外，您不必應用abs pos來驗證容器是否正確包裝，這是最初的問題。但是，指出一個出色的工作...... – TNCodeMonkey 2012-04-25 20:23:49

這將這樣的伎倆：

div.wrapper { /* outer-most div */ 
    ...  /* other styles */ 
    overflow:auto; 
}

我經常用這個，偉大工程ININ所有現代瀏覽器。

乾杯

來源

2012-04-25 16:44:05 Madbreaks

使用你的方式添加不需要的滾動條，對於這種情況更好地使用'overflow：hidden'來堅持。 – skip405 2012-04-25 18:59:08

如何包裝3個浮動div的絕對div

回答

相關問題