html - 元素高度取决于父元素而不是内容？

Question

我有 3 个容器，一个是 Total(红色边框)，里面有 Left(黄色边框，包含图像)和 Right(蓝色边框，包含文本)。

Left 设置为大约 30%，float: left;而 Right 设置为 70% float: right;

现在，我想要实现的是:我希望两者都具有 Total 的高度，而 total 仍然以某种方式依赖于内容 - 所以我可以将 Left 和 Right 的内容居中Total(红色)的中间，margin-top，margin-bottom = auto；

1) 我不能在 Total 上设置固定高度，它确实固定了高度，但内容在变窄时会溢出(否则它只是荒谬的空)。

2) 这是元素的视频，可以清楚地了解我要实现的目标。我也希望没有js。 https://my.mixtape.moe/kxoobz.webm

Answer 1

您可以使用 flexbox实现你想要的:

.total {
  display: flex;
}

.red {
  border: 2px solid red;
  flex: 1 0 30%; /* fill 30% width */
}

.yellow {
  border: 2px solid yellow;
  flex: 1 0 70%;
}

<div class="total">
  <div class="red">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="yellow">
    Quisque porttitor, ipsum vel elementum ultricies, magna arcu scelerisque massa, et laoreet elit felis nec urna. Praesent suscipit leo at ullamcorper rutrum. Suspendisse potenti. Phasellus pretium mauris id lacus dapibus finibus. Nunc placerat est quis nisi aliquet, ac aliquet leo sagittis. Donec quis aliquet neque. Suspendisse potenti. In vestibulum nisl ut risus fermentum tempor sed at arcu. Aenean at ante turpis. Integer nec dolor placerat diam vulputate consequat. Cras consectetur mi scelerisque massa accumsan auctor. Nunc imperdiet lacus eget justo luctus molestie. In dignissim lectus eget feugiat tincidunt. Vestibulum tempus est risus, eget suscipit turpis molestie id.
  </div>
</div>