Question

我的CSS问题。我的屏幕上有一个区域是按钮。按钮的数量是可变的。这些按钮是封闭的在DIV内部（sbr_btn）。像这样：

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

Answer 1

只需在包含overflow:hidden：

的div上使用

#sbr_btn {
    overflow:hidden;
}

{{1}}

JS Fiddle demo

Answer 2

您可以使用<div> CSS样式在容器的末尾放置一个空的clear: both;。我在浮动元素后面加一个强迫它们的容器封闭它们。

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

此外，只需设置容器的大小即可避免使用此解决方案。

如何将DIV全封闭浮动DIV放入其中？

2 个答案: