时间戳

首页 > 解决方案 > 并排设置 2 Div 和 3rd Div 应低于 2nd Div

html - 并排设置 2 Div 和 3rd Div 应低于 2nd Div

问题描述

我有一个场景，比如显示 2 个 Div 应该并排显示，而 3rd Div 应该在 2nd Div 之下。2nd 和 3rd Div 高度与 1st Div 高度相同。所有 3 个 Div 都应该像图像一样显示。下面的代码有什么问题吗？

在此处输入图像描述

代码

.calendar-div {
  float: left;
  width: 350px;
  height: 800px;
  margin-right: 8px;
  background-color: green;
}

.list-div {
  margin-left: 358px;
  height: 500px;
  background-color: darkgray;
}

​ .legend {
  clear: both;
  margin-left: 358px;
  margin-bottom: 500px;
  height: 300px;
  background-color: coral;
}
<div class="calendar-div"> Calendar</div>
<div class="list-div">List</div>
<div class="legend"> LEGEND</div>

标签： htmlcss

解决方案

display: flex让我们开心。

你的HTML应该是这样的。

<div class="wrapper">
  <div id="1"></div>
  <div class="wrapper_two>
    <div id="2"></div>
    <div id="3"></div>
  </div>
</div>

div 1、2、3 必须有高度。而css代码就像

.wrapper {
  display: flex;
}

.wrapper_two {
  display: flex;
  flex-direction: column;
}

flex在一行中设置子元素，因为它的默认方向是row.

所以#1并wrapper_two设置在一行中。

wrapper_twophas flex-direction: column;，因此它将子元素设置在一列中。

推荐阅读