Question

我有3个div（彩色方块）和一个按钮。

如何将按钮置于div下面？

使用我当前的代码，该按钮显示在与//getting data ArrayList<String> runfunc = new ArrayList<String>(); final AsyncAppData<EventEntityWhy> myevents4 = mKinveyClient.appData("WhyWorldTemp", EventEntityWhy.class); myevents4.get(new KinveyListCallback<EventEntityWhy>() { @Override public void onSuccess(EventEntityWhy[]){ for (EventEntityWhy x1 : result) { String temp1 = (String) x1.get("whyindex"); runfunc.add(temp1) } } } //then processing will start //runfunc array will be processed here相同的行中，并且它向左浮动。谢谢你的回答。

＆＃13;

#squares

＆＃13;

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

＆＃13;

Answer 1

您是否有特定原因使用position: absolute作为方形容器？

如果没有，您可以将位置设为相对位置，重新定位内容并使按钮居中。

重要的代码更改：

#squares {
    position: relative;
    justify-content: center;
}

#button {
    margin: 0 auto;
}

小提琴：https://jsfiddle.net/q17fa25w/

Answer 2

由于您已经在使用flexbox，因此有多种解决方案，所有这些解决方案都比较简单。

这是一个：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

解决问题的其他方法，您可以为 #button div设置填充左侧和顶部：

#button {
    width: 100px;
    height: 50px;
    clear: both;
    padding: 120px 35%;
}

将一个按钮置于3个div下

3 个答案: