我怎樣才能讓我的DIV完全圍繞它的浮動DIV？

我遇到了CSS問題。我的屏幕上有一個區域，其中是按鈕。按鈕的數量是可變的。這些按鈕封裝在DIV（sbr_btn）內部的。事情是這樣的：我怎樣才能讓我的DIV完全圍繞它的浮動DIV？

Outer DIV Outer DIV Outer DIV 

01 02 03 04 05 
06 07 08 ... 
71 72 73 74 75 

Outer DIV Outer DIV Outer DIV

的問題是，因爲我的按鈕有浮動：然後離開了外DIV 不圍繞按鈕。它只是忽略了所有按鈕的高度，看起來不像上面那樣。有什麼辦法可以讓外部的DIV圍起浮動按鈕嗎？

<div id="sbr_btn" > 
     <div><a href='xx'>01</a></div> 
     <div><a href='xx'>02</a></div> 
     <div><a href='xx'>03</a></div> 
     <div><a href='xx'>04</a></div> 
     <div><a href='xx'>05</a></div> 
     <div><a href='xx'>06</a></div> 
     many more 
     <div><a href='xx'>75</a></div> 
</div> 


#sbr_btn div { 
    float: left; 
    padding: 4px; 
    text-align: center; 
} 
#sbr_btn div a { 
    display: inline-block; 
    padding: 1px 4px; 
    border: 1px solid #CCCCCC; 
    border-radius: 4px 4px 4px 4px; 
    color: #111111; 
}

來源

2011-10-12 Samantha J T Star

內容豐富的上一個問題：http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing – CyberDude

在含div只需使用overflow:hidden：

#sbr_btn { 
    overflow:hidden; 
}

JS Fiddle demo。

來源

2011-10-12 08:04:59

您可以使用clear: both; CSS樣式在容器的末尾放置一個空的<div>。我在浮動元素之後加入了一個元素來強制它們的容器將它們包圍起來。

<div id="sbr_btn" > 
    <div><a href='xx'>01</a></div> 
    <div><a href='xx'>02</a></div> 
    <div><a href='xx'>03</a></div> 
    <div><a href='xx'>04</a></div> 
    <div><a href='xx'>05</a></div> 
    <div><a href='xx'>06</a></div> 
    <!-- many more --> 
    <div><a href='xx'>75</a></div> 

    <div class="clearFix"></div> 
</div>

.clearFix { clear: both; }

此外，只需設置容器的大小，避免了這種解決方案的需求。

來源

2011-10-12 08:42:21 Sparky

我怎樣才能讓我的DIV完全圍繞它的浮動DIV？

回答

相關問題