0

我需要在 a 中有两列<div>：

当前的 HTML

<div id="corpo">
    <div id="corpo_esquerdo">
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
    </div>

    <div id="corpo_direito">
        direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd
        fasdf asd fasd fasd fasdfa sdfa
    </div>

</div>

当前的 CSS

#corpo {
    border: 5px #ffe4c4 solid;
    width: 980px;
    margin: -30px auto;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 15px;
    color: #a8a8a8;
    font-size: 20px;
}

#corpo_esquerdo {
    width: 650px;
    float: left;
    border: #bababa solid 2px;
}
#corpo_direito {
    width: 300px;
    float: right;
    background-color: #bababa;
    border-radius: 5px;
    color: #f5f5f5;
    padding: 5px;
}

但是div#corpo_esquerdo和div#corpo_direito交叉div#corpo。

穿越 div

我该怎么做才能拥有div#corpo_esquerdo并且div#corpo_direito不跨越div#corpo？

4

8 回答 8

3

您还可以将 overflow:auto 添加到 #corpo div

#corpo {
    overflow:auto;
    border: 5px #ffe4c4 solid;
    width: 980px;
    margin: -30px auto;
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 15px;
    color: #a8a8a8;
    font-size: 20px;
}

在这里查看结果：http: //jsfiddle.net/nF5vZ/

于 2012-05-30T17:47:35.797 回答
2

如果应用overflow:hidden到包含浮动子项的父容器，则父容器将展开以适应其子容器。

#corpo {
    overflow: hidden;
    /* the rest of your definition */
}
于 2012-05-30T17:40:30.227 回答
2

尝试像这样清除内容：

<div id="corpo">
  <div id="corpo_esquerdo">
  your text
  </div>
  <div id="corpo_direito">
  your text
  </div>
  <!-- clear -->
  <div style="clear:both;"></div>
</div>
于 2012-05-30T17:45:40.683 回答
1

IMO 最有效的方法是应用溢出属性

#corpo_esquerdo {
    width: 650px;
    float: left;
    border: #bababa solid 2px;
    overflow: hidden;
}
于 2012-05-30T17:40:18.437 回答
1

尝试添加：

overflow:hidden;

到您的#corpo_esquerdo 和#corpo_direito div。

于 2012-05-30T17:40:34.643 回答
1

这里发生了两件事。

一- 如果您想隐藏父级边界之外的内容，正如其他人所指出的，请使用overflow:hidden.

二- 您还体验到容器内浮动元素的折叠效果。这个想法是浮动元素从自然页面流中取出（如绝对定位的项目）。这些项目的高度不会强制父元素垂直扩展。

如果您希望父元素的高度扩大，clearfix请对父元素使用应用类。 

ie: <div id="corpo" class="clearfix">

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    *zoom:1;
}

此外，您可以在浮动元素下方插入另一个元素，该元素仍然在clear:both应用 css 规则的自然页面流中（正如其他人所指出的那样）。我不喜欢这种解决方案，因为您必须使用无关的元素才能使其工作。

于 2012-05-30T17:46:39.060 回答
1

<div style="clear:both"></div>在关闭外部 div 之前添加：

<div id="corpo">
    <div id="corpo_esquerdo">
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
        asdss ssssss ssssss ssssssss ss sssssssssssddddd ddddddddd
        ddddddddf asdfasdfasdfasdsdsd asdf asdf sd
    </div>


    <div id="corpo_direito">
        direito sdfasdfasdfasd fasd asfd asdf asdfa sdfa sdf sadf asd
        fasdf asd fasd fasd fasdfa sdfa
    </div>
    <div style="clear:both"></div>

</div>

这是一个演示：http: //jsfiddle.net/MU7hn/

于 2012-05-30T17:47:04.857 回答
0

在 jsFiddle 上查看解决方案：http: //jsfiddle.net/Rzw44/

它基本上对div包含floated div子级的父级应用了 clearfix 。

您可以在此处阅读有关该解决方案的更多信息

于 2012-05-30T17:50:47.647 回答