Question

是否可以（不使用花车）实现2个div一个接一个，而第三个填充空间。但是，以下HTML无法更改;而且我们也无法使用不能使用花车。

以下是我的尝试：

＆＃13;

div{
  width: 33%;
  height: 100px;
  background: red;
  display: inline-block;
}

.left{
  background: blue;
}

.right{
  background: green;
}

.middle{
  width: 50%;
  height: 200px;
}

＆＃13;

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

＆＃13;

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

JS小提琴适合任何想要它的人：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>

Answer 2

据我所知，如果不添加额外的容器，就无法做到这一点。

<强> HTML：

<div class="wrapper">
        <div class="item">Hello</div>
        <div class="item">hello2</div>
        <div class="item">hello3</div>
</div>

<强> CSS：

.wrapper {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column wrap;
              flex-flow: column wrap;
      height: 500px;
      max-width: 500px;
    }

    .item {
      background: lightblue;
      width: 50%;
      height: 50%;
    }
    .item:last-child {
      width: 100%;
      max-width: 100%;
      height: 100%;
      background-color: green;
    }

在codepen上查看。祝你好运！

Answer 3

如果您可以使用包装器包装三个DIV，则需要使用 flex 。

See a jsfiddle

除非您使用<body>定位或absolute，否则无法在没有容器（可能是float）的情况下完成此操作。这些都可能对你有用（我们没有很多细节），但它们会有问题。

div{
  height: 100px;
}

.wrapper {
  display: flex;
  width: 100%; // need for compat
}

.left{
  background: blue;
  flex: 0 0 20px;
}

.right{
  background: green;
  flex: 0 0 20px;
}

.middle{
  background: red;
  flex: 1 0 auto;
}

获得2个div 1低于其他，而第三个填补空间

3 个答案: