javascript - 如何放置三个具有响应属性的 div？

Question

如何将添加的图像中的三个 div(两个水平的和一个垂直的)放置到具有响应属性的水平 div 的底部？

我正在使用以下 CSS:

.rightallign{ float: right; }
.leftallign{ float: left; } 

为了让两个div水平，但是不行。

Answer 1

下面是如何使用 float 。

* {box-sizing:border-box;}
div {
  border: 1px solid #aaa;
  background: #eee;
}
.half {
  float: left;
  width: 50%;
}
.full {
  clear: both;
}

<div class="half">one</div>
<div class="half">two</div>
<div class="full">three</div>

您也可以在顶行使用 flexbox，而不必指定任何类型的宽度。

* {box-sizing:border-box;}
div {
  border: 1px solid #aaa;
  background: #eee;
}
.flex {
  display: flex;
}
.flex > div {
  flex-grow: 1;
}

<div class="flex">
  <div class="half">one</div>
  <div class="half">two</div>
</div>
<div class="full">three</div>