Question

我在容器中有2个div，每个内部div都向左和向右浮动，我想为主内容div中的数据创建2列。目前，文本泄漏了内容左侧和内容右侧的底部，即使它们包含在内容中。

<div id="content">
    <div id="content-left">I want to put content in here<br/><br/><br/>This is outside? why?    </div>
    <div id="content-right">and more in here</div>
    Maybe other content here, inside the content
</div>

和CSS

#content-left{
width: 50%;
border: 1px dotted #aaa;
float: left;
}

#content-right{
width: 49%;
float: right;
border: 1px dotted #aaa;
}

#content{
background-color: #eee;
width: 95%; /* Width of Main Content Div, % for Fluid*/
height: auto;
max-width: 1350px; /*Max width, To wide on big monitor*/
margin: 0 auto;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}

此外，关于浮动物品的任何提示都会很棒，如果我发现它们有用可能会获得代表，我认为我掌握了它但显然没有！：P

Answer 1

您只需在最后br

中添加空白div即可

 Maybe other content here, but this should be below the 2 above divs in the rendered view.
    <br style="clear:both;" />
</div>

http://jsfiddle.net/jasongennaro/sahbz/9/

这种情况正在发生，因为floated元素已从文档流中取出。

Answer 2

目前，文字漏掉了内容的左下角内容权利，即使它们包含在内容中。

您需要“清除/包含您的花车”，更多信息请参见：http://www.ejeliot.com/blog/59

一种简单的方法是将overflow: hidden添加到#content。

请参阅： http://jsfiddle.net/sahbz/8/

Answer 3

纯CSS

.content:after {
  clear: both;
  content: '';
  display: block;
}

在容器内浮动div，文本漏出容器的底部，我希望它在容器内。

3 个答案: