Question

我正在尝试将#container放在屏幕的中央，然后制作图表＆＃39; float:left内的#container。

但是根据我在下面的代码，＆＃39;图表＆＃39;位于#container下。任何人都可以告诉我如何更改代码？并告诉我为什么代码制作图表＆＃39;在#container之外。

＆＃13;

#container {
  margin: auto;
  width: 10%;
  border: 3px solid #73AD21;
  padding: 10px;
}
#id1,
#id2,
#id3,
#id4 {
  float: left;
  font-size: 30px;
}

＆＃13;

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

＆＃13;

Answer 1

当你向一个元素添加浮动时，你将从文档的自然流中取出。

您需要在浮动项的包装中添加某种clearfix。

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

如果宽度固定，为什么要浮动div？

Answer 2

每当float需要清除float项时，如果要应用相同的属性，请使用类而不是ID。增加容器的width，以便按照上面评论中的说明，每行包含2个项目

＆＃13;

.cf:before,
.cf:after {
  content: "";
  display: block;
}
.cf:after {
  clear: both;
}
#container {
  margin: auto;
  width: 24%; /* to have 2 divs per row */
  border: 3px solid #73AD21;
  padding: 10px;
}
.float {
  float: left;
  font-size: 30px;
}

＆＃13;

<div id="container" class="cf">
  <div class="float">
    <p>chart1</p>
  </div>
  <div class="float">
    <p>chart2</p>
  </div>
  <div class="float">
    <p>chart3</p>
  </div>
  <div class="float">
    <p>chart4</p>
  </div>
</div>

＆＃13;

如何在容器内浮动元素

2 个答案: