html - 获得 2 div 1 below other while third fills the space

Question

是否有可能(不使用 float )实现 2 个 div 一个在另一个下面，而第三个 div 填满空间。但是，不能更改以下 HTML；而且我们不能使用也不能使用 float 。

这是我尝试过的:

div{
  width: 33%;
  height: 100px;
  background: red;
  display: inline-block;
}

.left{
  background: blue;
}

.right{
  background: green;
}

.middle{
  width: 50%;
  height: 200px;
}

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

如您所见，左侧的 2 个 div 被向下推。有没有办法让他们向上移动或以其他方式完全实现这一目标？

JS Fiddle 适合任何需要它的人:https://jsfiddle.net/g6j7nLp5/2/

Answer 1

您可以使用 CSS grid :

body {
 display:grid;
 grid-template-areas: 
    "left mid"
    "right mid";
 grid-gap:10px;
}

.left{
  background: blue;
  grid-area:left;
}

.right{
  background: green;
  grid-area:right;
}

.middle{
  height: 200px;
  grid-area:mid;
  background: red;
}

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>