Question

我在main_content div中有一些div，但它们不会在父级内插入。

我做了我的研究，我试图漂浮：离开父母，但不幸的是它破坏了弯曲的边缘和阴影，所以有些事情显然是错误的。

在子div中，我有一个复选框，当勾选时，会展开一个文本面板，但是同样的问题就出现了，因为divdo的大小没有增加，它被认为是一个独立的实体，应该是它的孩子。

这是html

<div id="wrapper">
    <div id="main_content">
        <h1 class="standard">Team Directory</h1>
        <div class="plaque_left">
            <h2>Blackhawks</h2>
            <h3>EB Netball CLub</h3>
            <p>www.random.com</p>
            <p>More text</p>
            <p>and more...</p>
            <p>and more</p>
            <p>finally...</p>
                <input type="checkbox" name="show" id="show"/>
                <label for="show">Named Players</label>
                <article class="small">More content here
                    <br/>
                        <br/>and here
                        <br/>end
                </article>
        </div>
    </div>
</div>

链接的CSS

#wrapper {
    background: white;
    position: relative;
    width: 77em;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid white;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: 0 0 40px black
}
#main_content {
    background: white;
    position:relative;
    width: 76em;
    height: 100%;
    margin-left: auto;
    margin-right: auto
}

和（只是左边的div作为代码对于正确的div是相同的，除了float：right）

.plaque_left {
    display:block;
    height: 23.5em;
    margin: 1em 1em 1em 5em;
    padding: 0 1em 0 1em;
    background: white;
    -webkit-box-shadow: 0 0 10pt grey;
    float:left;
    width:38%;
    -webkit-border-radius:10pt
}
.plaque_left article {
    background:#d0a9f5;
    -webkit-border-radius: 10pt;
    overflow:hidden;
    height: 0px;
    position: relative;
    z-index:10;
    -webkit-transition: height 0.3s ease-in-out
}
.plaque_left input:checked ~ article {
    -webkit-transition: 0.5s ease-in-out
}
.plaque_left input:checked ~ article.small {
    height: 140px;
    position:relative
}

要确认，第一个问题是.plaque div不包含#main_content div。其次当复选框扩展以显示额外内容时，它会溢出斑块div，除非我选择自动，这意味着我可以滚动，但这不是我想要的，我希望斑块div调整大小以允许扩展内容。

提前致谢

Answer 1

plaque_left div的高度没有扩大，因为你修复了它：height: 23.5em;。您可以使用min-height或完全删除高度。

Answer 2

我建议您将overflow: hidden添加到#wrapper：

#wrapper {overflow: hidden;}

这是强制包装器封装浮动项目的最简单方法。

Answer 3

添加一个元素，例如div，它将清除浮动并防止它们崩溃。你可以使用这种风格：

.clearFloat{
    clear: both;
}

然后，您可以在主要内容的底部创建一个空div，它将清除（腾出空间）其上方的任何元素。您可以在下面的小提琴中看到行为：

http://jsfiddle.net/aNgVj/1/

孩子扩展出父母

3 个答案: