将div的内容定位在另一个div上

Question

我不明白为什么float: right无法在另一个方框上工作。
有谁可以帮我解决这个问题？

这是我的代码：

＆＃13;

＆＃13;

.main-box {
  height: 400px;
  width: 400px;
  position: relative;
  background: black;
}
.right-box {
  float: right;
  width: 100px;
  height: 100px;
  background: red;
}
.left-box {
  width: 100px;
  height: 100px;
  background: red;
}
.bottom-boxes {
  position: absolute;
  bottom: 0;
}

＆＃13;

<div class="main-box">
  <div class="top-boxes">
    <div class="right-box"></div>
    <div class="left-box"></div>
  </div>
  <div class="bottom-boxes">
    <div class="right-box"></div>
    <div class="left-box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是我的代码的结果图像：

这是我想要实现的结果图像：

Answer 1

由于position: absolute上bottom-boxes，因此您需要添加width: 100%

＆＃13;

＆＃13;

.main-box {
  height: 400px;
  width: 400px;
  position: relative;
  background: black;
}
.right-box {
  float: right;
  width: 100px;
  height: 100px;
  background: red;
}
.left-box {
  width: 100px;
  height: 100px;
  background: red;
}
.bottom-boxes {
  position: absolute;
  bottom: 0;
  width: 100%;
}

＆＃13;

<div class="main-box">
  <div class="top-boxes">
    <div class="right-box"></div>
    <div class="left-box"></div>
  </div>
  <div class="bottom-boxes">
    <div class="right-box"></div>
    <div class="left-box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是使用flexbox

这是更好的解决方案

＆＃13;

＆＃13;

.main-box {
  height: 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: black;
}
.row {
  display: flex;
  justify-content: space-between;
}
.box {
  width: 50px;
  height: 50px;
  background: red;
}

＆＃13;

<div class="main-box">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Here's a working fiddle

当您在容器上放置绝对位置时，您还必须使用bottom属性指定top，right和left属性来设置它的宽度和高度。

.bottom-boxes{
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

在这种情况下，left: 0;和right: 0;相当于width: 100%;，top: 0和bottom: 0;相当于height: 100%;

如果您未指定值，则默认情况下为“auto;”

Answer 3

float无法处理绝对定位的元素 - 您需要提供top 或 bottom和right 或 left参数（默认设置为top: 0;和left: 0;，即父元素的左上角。