不会嵌套
我正在尝试使外部类 - rightholder_empty 与内部类的内容垂直扩展，但已经没有想法了...如果您能提供帮助，请您也解释一下，因为我需要明白这一点。
HTML 和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>
I am trying to make the outer class - rightholder_empty, expand vertically with the content of the inner classes but have run out of ideas...If you can help, could you please explain too as I need to understand this.
The HTML & 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我昨天就遇到了这个问题，差点失去理智！尝试添加
溢出：自动；
到
rightholder_emptyCSS。这对我有用。I had this problem yesterday and almost lost my mind! try adding
overflow: auto;
to the
rightholder_emptyCSS. That worked for me.您必须
清除您的父DIV，因为子DIV的中有浮动，所以像这样写：You have to
clearyouparentDIV because thechild DIV'shavefloatin it so write like this:“当浮动元素位于容器框中时，问题就会发生，该元素不会自动强制容器的高度调整为浮动元素。当元素浮动时，其父元素不再包含它，因为浮动元素已从流中移除。 ”
引用自 http://www.webtoolkit.info/css-clearfix.html
请参阅此处的解决方案。
"The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow."
Citation from http://www.webtoolkit.info/css-clearfix.html
See solutions here.