如何在容器内浮动元素

Question

我正在尝试将 #container 放在屏幕中央，并使 'charts' float:left 位于 #container.

内

但是使用下面的代码，'charts' 位于 #container 下方。谁能告诉我如何更改代码？并告诉我为什么代码使 'charts' 在 #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>

Answer 1

当您向元素添加浮动时，您将脱离文档的自然流动。

您需要向浮动项的包装器添加某种 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>

更新

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

Answer 2

每当您 float 需要清除 float 项目时，如果您应用相同的属性，请使用类而不是 ID。为您的容器增加 width，以便每行有 2 个项目，如您在上面的评论中所述

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

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

如何在容器内浮动元素

How to float elements inside a container

html

css

css-float