0

每当一个 div 向左或向右浮动时，它都会从其容器 div 中覆盖。如果删除了浮动属性，则该 div 适合容器 div。怎么会出现这种情况？请告诉我。请参考我在http://jsfiddle.net/ZtJZS/上的 jsfiddle 。愚蠢的是我的代码：-

<div class="main">
<div class="left-content">
    This is an example content<br />
    This is an example content<br />
    This is an example content<br />

 </div>
 </div>

可以在我的小提琴中找到 css 代码......在此先感谢。

4

4 回答 4

1

您可以添加溢出：隐藏；到你的主要风格。这将使您的硬币容器伸展开来。见http://jsfiddle.net/ZtJZS/4/

div.main{
   width:90%;
   padding:15px;
   border:1px solid #000;
   overflow: hidden
}

为样式添加高度，如果要限制其垂直拉伸并添加垂直滚动条以使容器可滚动

于 2013-05-20T08:13:47.177 回答
1

你也可以把 div 放在主 div 的末尾，它会做你想做的事

<div class="main">
<div class="left-content">
    This is an example content<br />
    This is an example content<br />
    This is an example content<br />

 </div>
<div style="clear:both"></div>
</div>
于 2013-05-20T08:15:19.800 回答
1

这就是它与浮动项目一起工作的方式——浮动内容“不计入”父项目的高度。要解决它，您必须选择一些选项：

  • 使.maindiv 也浮动，因为它可以在您的 fiddle 的这个版本中看到。但是，这对于您的布局可能是不可接受的。
  • 用于overflow:auto使外部 div 跨越内部 div。这里描述的“新解决方案”非常有效：http ://www.quirksmode.org/css/clearing.html这就是它在你的小提琴中的样子。
于 2013-05-20T08:13:17.387 回答
1

您需要的是CSS clear fix。它将清除包含的高度div。

将以下内容添加到您的样式表中：

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

并将cf该类添加到您的包含div.

这是一个例子jsFiddle。

于 2013-05-20T08:10:22.023 回答