html - Making parent grow beyond child

Question

I have a parent container which has a div containing text:

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

I have the following CSS rule for them:

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

Thing is, the parent div grows only upto the length of the text. I want it to grow a bit beyond the text say 20% more. How do I achieve this?

Answer 1

see this: 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为 on#parent将导致它再次拾取#text的维度。如果不适合您，您也可以使用该.clearfix解决方案：overflow

/**
 * 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