获得2个Divs 1以下，而第三个则填满了空间

是否有可能(不使用浮子(使一个在另一个下方的2divs，而第三个则填充了空间。但是，以下HTML无法更改；而且我们不能使用不能使用浮子。

这是我尝试的：

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个divs被推下。有没有办法使他们向上移动或完全实现这一目标？

JS小提琴，适合任何想要它的人：https：//jsfiddle.net/g6j7nlp5/2/

您可以使用CSS网格：

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>

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

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上检查一下。祝你好运！

您要使用 FLEX 如果您可以用包装器包装三个Divs。

请参阅JSFIDDLE

除非使用absolute定位或float s，否则没有容器(也许是<body>(就无法完成。这两者都可能为您带来可能(我们没有很多细节(，但它们会有问题。

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;
}

相关内容

最新更新

热门标签：