Question

fiddle中有两个饼图。为什么内容不适合其中的内容？将图表溢出内容的原因是什么？我想把这些图表放到黄色内容区域。作为一个CSS新手，我不知道我怎么能解决它。

#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>

Answer 1

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

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

Answer 2

#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.
}

Answer 3

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

如何使外部div适合儿童div？

3 个答案: