如何在父div的框架内保持浮动div？
如何在父div的框架内保持浮动div？
提问于 2012-01-26 18:58:56
我有一个包含其他几个div的div，并设置了float:left。现在我想在它们周围都有一个框架，所以我在父div上放了一个边框，但浮动的div“流”出了框架……
CSS：
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
}
.column {
float:left;
padding-left:10pt;
}Html：
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
</div>我能做些什么(在CSS中)使它们保持在父框架内？
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-01-26 19:00:16
将overflow: hidden添加到父<div> - http://jsfiddle.net/5AVA8/中
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
overflow: hidden;
}Stack Overflow用户
发布于 2012-01-26 19:02:12
你不能清理花车。如果你改变你的代码，它会解决你的问题。
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
}
.column {
float:left;
padding-left:10pt;
}
.clear {
clear: both;
}
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
<div class="clear"></div>
</div>请看我在这里设置的示例- http://jsfiddle.net/spacebeers/RQNDr/
有关clear属性的详细信息- http://css.maxdesign.com.au/floatutorial/
Stack Overflow用户
发布于 2012-01-26 19:02:07
你必须‘清除浮点’，‘浮点清除’有多种方法。一些解决方案只涉及CSS，我的首选解决方案(有些人不喜欢它，因为它添加了额外的标记)是添加一个“清除div”，它的工作方式如下：
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
<div style="clear:both"></div>
</div>请看倒数第二行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9017120
复制相关文章
相似问题