兄弟姐妹在没有Flexbox的情况下填充包装内的垂直空间

Question

我在包装器内有两个div，并排。其中一个div具有更多内容，另一个，我希望第二个填充包装器的垂直空间。

＆＃13;

＆＃13;

Select-Object

＆＃13;

.wrapper {
  height: 50%;
  width: 50%;
outline: 1px solid gray;
  font-size: 0px;
}
.left {
  display: inline-block;
  width: 70%;
  font-size: 16px;
    background: tomato;
}
.right {
    font-size: 16px;
    background: gold;
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

＆＃13;

＆＃13;

＆＃13;

我知道如何使用flexbox，但由于兼容性问题，我想在没有它的情况下这样做。有谁知道怎么做？

Answer 1

您可以使用css Table布局。

＆＃13;

＆＃13;

.wrapper {
  height: 50%;
  width: 50%;
  outline: 1px solid gray;
  font-size: 0px;
  display: table;
}

.left {
  width: 70%;
  font-size: 16px;
  background: tomato;
  display: table-cell
}

.right {
  font-size: 16px;
  background: gold;
  width: 30%;
  display: table-cell
}

＆＃13;

<div class="wrapper">
  <div class="left">
    This is left This is left This is left This is left This is left This is left
  </div>
  <div class="right">
    This is right
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过定位来实现：

.wrapper {
  position: relative; /* added */
  height: 50%;
  width: 50%;
  outline: 1px solid gray;
  font-size: 0px;
}
.left {
  display: inline-block;
  width: 70%;
  font-size: 16px;
  background: tomato;
}
.right {
  position: absolute; /* added */
  height: 100%; /* added */
  font-size: 16px;
  background: gold;
  width: 30%;
  display: inline-block;
  vertical-align: top;
}

<div class="wrapper">
  <div class="left">
    This is left
    This is left
    This is left
    This is left
    This is left
    This is left
  </div>
  <div class="right">
    This is right

  </div>
</div>

Answer 3

希望这会对你有所帮助。

.wrapper {
  height: 50%;
  width: 50%;
  outline: 1px solid gray;
  font-size: 0px;
  display:table;
}
.left {
  display: table-cell;
  width: 70%;
  font-size: 16px;
    background: tomato;
}
.right {
    font-size: 16px;
    background: gold;
    width: 30%;
    display: table-cell;
    vertical-align: middle;
}

<div class="wrapper">
  <div class="left">
    This is left
    This is left
    This is left
    This is left
    This is left
    This is left
  </div>
  <div class="right">
    This is right

  </div>
</div>

Answer 4

如果更改相关元素的初始float行为不可取，那么使用伪元素

也可以实现预期的行为

代码段示范：

注意：为了演示，内容已设置为“可编辑”，通过直接编辑元素为元素添加更多内容

.wrapper {
  height: 50%;
  width: 50%;
  outline: 1px solid gray;
  font-size: 0px;
  position: relative; /* Additional */
}
.left {
  display: inline-block;
  width: 70%;
  font-size: 16px;
    background: tomato;
}
.right {
    font-size: 16px;
    background: gold;
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

/* Additional */
.left:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: tomato;
    z-index: -1;
    width: 70%;
}
.right:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: gold;
    z-index: -1;
    width: 30%;
}

<div class="wrapper">
  <div class="left" contenteditable="true">
    This is left
    This is left
    This is left
    This is left
    This is left
    This is left
  </div>
  <div class="right" contenteditable="true">
    This is right
  </div>
</div>