3

There is two piecharts in fiddle. Why the content isn't fit with things that inside of it? What is the reason of overflowing charts out of the content? I want put these charts in to yellow content area. Being a css newbie i don't know that how i can fix it. 

#content {
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    padding: 10px 20px 30px 20px;
    background-color:yellow;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
}

<div id="content"> 
    This is the content area
    <div id="piechart1" style="position:relative;top:20px;float:left;"></div>
    <div id="piechart2" style="position:relative;float:left;"></div>
</div>
4

3 回答 3

3

这实际上是一个非常简单的修复 - 只需制作 #content div overflow:auto。默认情况下，它不会扩展以覆盖子 div，因为它们都向左浮动，这有效地折叠了它们。使父溢出：自动强制扩展以覆盖浮动 div 的宽度和高度。

http://jsfiddle.net/wuKFJ/5/

于 2013-08-20T08:59:03.300 回答
1 
#content {
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    padding: 10px 20px 30px 20px;
    background-color:yellow;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
    overflow: auto.
}
于 2013-08-20T08:59:55.303 回答
1

你将不得不清除浮动。我会使用<div style="clear:both;"></div> 检查更新的小提琴http://jsfiddle.net/wuKFJ/4/

于 2013-08-20T09:01:04.717 回答