Question

所以，我有一个问题，我似乎无法找到解决方案。我知道这很容易，但我还是个菜鸟......

每当我使用命令float:left时，这两个.con-icon和#con-info会一直运行到名为#test的下一个div（深红色的那个）。但我需要他们留在#contain边界内。

<section id="contain">
    <h1>Contain</h1>
    <div id="con-info">
        <div class="con-icon">
            <h2>1</h2>
            <h2>1</h2>
            <h2>1</h2>
        </div>
        <p>2</p>
        <p>2</p>
        <p>2</p>
    </div>
    <div id="test"></div>
</section>

CSS在链接

中

我做错了什么？

Answer 1

只需将overflow:auto;行添加到#con-info课程即可。 http://jsfiddle.net/garsdubh/。这将使您的父元素知道其浮动的子高度。

Answer 2

将此添加到您的CSS：

#con-info:after {
    content: " ";
    display: block;
    clear: both;
}

Answer 3

在overflow: hidden上使用#con-info。由于您已为height: auto声明#con-info，因此您需要隐藏overflow以获得自动高度。

<强> DEMO

#con-info {
    overflow: hidden; /* This is added to your Fiddle */
    position:relative;
    border:2px solid #C60;
    width:40%;
    height:auto;
    margin-left:10%;
}

彼此相邻的2个div进入下一个div

3 个答案: