html - 将按钮置于 3 个 div 下方

Question

我有 3 个 div(彩色方 block )和一个按钮。

如何将按钮置于 div 下方？

在我当前的代码中，该按钮与#squares 出现在同一行，并且 float 到左侧。感谢您的回答。

#div1 {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
#div2 {
  background-color: green;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
#div3 {
  background-color: blue;
  width: 100px;
  height: 100px;
}
#squares {
  display: flex;
  position: absolute;
  margin-left: 35%;
}
#button {
  width: 100px;
  height: 50px;
  clear: both;
}

<div id="squares">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>
<div id="button">
  <button>Click me!</button>
</div>

Answer 1

由于您已经在使用 Flexbox，因此有多种解决方案，而且都相对简单。

这是一个:

• 将两个容器包装在一个父容器中。
• 将 display: flex 和 flex-direction: column 添加到这个新容器。
• 现在您可以轻松地垂直和水平对齐方 block 和按钮。

#container {
  display: flex;
  flex-direction: column;
}
#div1 {
  background-color: red;
  width: 100px;
  height: 100px;
}
#div2 {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: 0 10px;
}
#div3 {
  background-color: blue;
  width: 100px;
  height: 100px;
}
#squares {
  display: flex;
  align-self: center;
  margin-bottom: 10px;
}
#button {
  align-self: center;
  text-align: center;
  width: 100px;
  height: 50px;
}

<div id="container">
  <div id="squares">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </div>
  <div id="button">
    <button>Click me!</button>
  </div>
</div>