我想把#container在屏幕中央并制作“图表”float:left在 - 的里面#container.
但是使用下面的代码，“图表”位于#container。谁能告诉我如何更改代码？并告诉我为什么代码将“图表”放在#container.
#container {
margin: auto;
width: 10%;
border: 3px solid #73AD21;
padding: 10px;
}
#id1,
#id2,
#id3,
#id4 {
float: left;
font-size: 30px;
}
<div id="container">
<div id="id1">
<p>chart1</p>
</div>
<div id="id2">
<p>chart2</p>
</div>
<div id="id3">
<p>chart3</p>
</div>
<div id="id4">
<p>chart4</p>
</div>
</div>
当您向元素添加浮动时，您就会脱离文档的自然流程。
您将需要向浮动项目的包装添加某种clearfix。
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
#container{
margin: auto;
width: 10%;
border: 3px solid #73AD21;
padding: 10px;
}
#id1,
#id2,
#id3,
#id4 {
float:left;
font-size: 30px;
}
<div id="container" class="clearfix">
<div id="id1"><p>chart1</p></div>
<div id="id2"><p>chart2</p></div>
<div id="id3"><p>chart3</p></div>
<div id="id4"><p>chart4</p></div>
</div>
UPDATE
如果宽度是固定的，为什么要让div浮动呢？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
