如何在响应属性中放置三个div？

Question

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

我正在使用以下CSS：

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

两个div是水平的，但它不起作用。

Answer 1

以下是使用花车的方法。

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

Answer 2

默认情况下，DIV占用页面宽度的100％。假设您的两个div具有正确的类.leftallign和.rightallign，您还需要确保它们仅占据宽度的50％（最大值），以便彼此相邻显示：

＆＃13;

＆＃13;

.leftallign {
  float: left;
  width: 50%;
}

.rightallign {
  float: right;
  width: 50%;
}

＆＃13;

<div class="leftallign">1</div>
<div class="rightallign">2</div>
<div>3</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）