Question

我在jsfiddle有一个程序，我想知道我应该如何让div绕过一切。绕过一切我的意思是绕过一切。（更有效的jQuery代码将不胜感激;）。）这是代码：

div {
    border:2px red outset;
}
div#container {
    width:50%;
}
div.section {
    position:relative;
    width:48%;
    display:inline;
    float:left;
}
    h3 {
    display:inline;
    width:48%;
    float:left;
    margin:0.65;
    text-align:center;
} a {
    display:inline;
    width:23%;
    float:left;
    margin:0.65%;
    text-align:center;
}

我的HTML：

<div id="container">
    <h3>Section 1</h3>

    <h3>Section 2</h3>
    <br />
    <br /> <a href="#sec1" class="hide">Hide</a><a href="#sec1" class="show">Show</a>
    <a href="#sec2" class="hide">Hide</a><a href="#sec2" class="show">Show</a>

    <div id="sec1" class="section">Some content</div>
    <br />
    <div id="sec2" class="section">Some more content</div>
</div>

Answer 1

将overflow:auto添加到您的容器div：

div#container {
    width:50%;
    overflow:auto;
}

<强> jsFiddle example

当您浮动子项时，父项基本上会在浮动子项从文档流中删除时收缩。添加溢出规则可恢复您期望的布局。你的jQuery看起来很好。

如何使div包含一切

1 个答案: