Question

我正在尝试创建外部类 - rightholder_empty，使用内部类的内容进行垂直扩展，但是已经没有想法......如果你能提供帮助，请你解释一下我需要明白这一点。

HTML＆amp; CSS：

<html>
<head>
<title>Css test</title>
<style>
  .rightholder_empty {
    padding:15px;
    margin:0 auto;
    border: solid 6px #e8e8e8;
    background: #f5f5f5;
    -webkit-box-shadow: 0 8px 6px -6px #666;
    -moz-box-shadow: 0 8px 6px -6px #666;
    box-shadow: 0 8px 6px -6px #666;
    border-radius:4px;
    position:relative;
    width:700px;
}

.split_l {
    padding:15px;
    margin-bottom:10px;
    background: #f5f5f5;
    float:left;
    width:45%;
    position:relative;
}

.split_r {
    padding:0 15px 15px 15px;
    margin-bottom:10px;
    background: #f5f5f5;
    float:right;
    width:45%;
    border-left: solid 4px #ededed;
    position:relative;
}

</style>
</head>

<body>

<div class="rightholder_empty">
    <div class="split_l">hello<br /><br />h<br /><br />h<br /><br />h</div>
    <div class="split_r">world</div>
</div>

</body>
</html>

Answer 1

昨天我遇到了这个问题，几乎失去了理智！尝试添加

溢出：自动;

到rightholder_empty CSS。这对我有用。

Answer 2

您必须clear parent DIV，因为child DIV's中有float，所以这样写：

.rightholder_empty {
    overflow:hidden;
}

Answer 3

“浮动元素位于容器框内时会出现问题，该元素不会自动强制容器的高度调整到浮动元素。当元素浮动时，其父元素不再包含它，因为浮动元素已从流动。“

来自http://www.webtoolkit.info/css-clearfix.html的引文请参阅此处的解决方案。

<div> s不会嵌套</div>

3 个答案: