Question

我有一个包含div的父容器：

<div id="parent">
<div id="text"></div>
</div>

我有以下CSS规则：

parent{
clear:both;
background:#f3f3f3;
min-height:180px;
}
text{
float:left;
overflow:auto;
min-height:44px;
width:400px;
margin-left:10px;
margin-top:12px;
}

事实是，父div只增长到文本的长度。我希望它比文本增长20％多一点。我如何实现这一目标？

Answer 1

请参阅：http://jsfiddle.net/VJ6rg/1

#parent{
   padding:3%;
   float:left;
   overflow:auto;

   clear:both;
   background:#f3f3f3;
   min-height:180px;
}
#text{
   float:left;
   overflow:auto;
   min-height:44px;
}

Answer 2

看起来它的工作原理正如你所期待的那样。除了你在CSS ID前面缺少哈希的事实。

即。 #text或#parent。

请参阅以下小提琴：http://jsfiddle.net/ZTtwv/

#parent {
    clear:both;
    background:#f3f3f3;
    min-height:180px;
    border:1px solid green;
}
#text {
    float:left;
    overflow:auto;
    min-height:44px;
    width:400px;
    margin-left:10px;
    margin-top:12px;
    border:1px solid red;
}

Answer 3

给它一些这样的填充：

对于所有方面： padding: 20%;

顶部： padding-top: 20%;

对于底部： padding-bottom: 20%;

左侧： padding-left: 20%;

右： padding-right: 20%;

Answer 4

由于您正在浮动#text，因此该元素的维度将不再影响#parent。无论其内容如何，min-height仍将适用于#parent。

在overflow: hidden/auto上设置#parent会使其再次获取#text的尺寸。如果overflow不适合您，也可以使用.clearfix solution：

/**
 * 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课程应用于#parent

即可

让父母成长超越孩子

4 个答案: