製作父增長超過孩子

我其中有一個包含分區文字父容器：製作父增長超過孩子

<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％。我如何實現這一目標？

來源

2013-07-08 Aneesh

你不應該用'浸軋bottom'是什麼？ –

我有多少填充？如果我保持30像素，它可以正常工作，而當30像素變得不足時，文本會顯着增長。我使用百分比嗎？似乎不適用於非固定寬度的div。對不起，我是全新的。 – Aneesh

看到這一點：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; 
}

來源

2013-07-08 12:36:16 EmRa228

與上面相同的問題。當文字增長一點時可以正常工作。但是，如果文本呈指數級增長，10％變得更少，而且父母再次失敗。如果我把它保持在30％的高度，它可以處理大量的文字，但是當文字較少時，佈局會被破壞。 – Aneesh

@ user2067771看到這個：http：// jsfiddle。net/VJ6rg/1/ – EmRa228

非常感謝！明確：兩個都是我猜的關鍵。 – Aneesh

看起來它作爲你希望它。除了你在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; 
}

來源

2013-07-08 12:39:23 Jacques

對不起。這些哈希不是我在複製時犯了錯誤的問題。它不起作用。這裏是增加的內容的鏈接。： http://jsfiddle.net/ZTtwv/3/ – Aneesh

給它一些填充像這樣：

對於四面八方： padding: 20%;

對於頂部： padding-top: 20%;

對於底部： padding-bottom: 20%;

左： padding-left: 20%;

對於右： padding-right: 20%;

來源

2013-07-08 12:39:39

既然你浮#text該元素的尺寸將不再影響#parent 。無論其內容如何，min-height仍適用於#parent。

在#parent上設置overflow: hidden/auto將導致它再次拾取#text的尺寸。您也可以使用.clearfix solution如果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

來源

2013-07-08 12:39:46

這工作，但不是我想要的方式。這會導致滾動條出現。我不滾動條。相反，我只是想要父級背景進行擴展。 – Aneesh

我已經更新了我的答案，以包含一個替代（'.clearfix'或'.cf'）解決方案。 –

製作父增長超過孩子

回答

相關問題