Question

我有3个容器，一个是Total（红色边框），里面有左（黄色边框，包含图像）和右（蓝色边框，包含文字）。

左边设置为大约30％，浮动：左;而右边设置为70％，浮动：右;

现在，我想要实现的目标如下：我希望两者都具有Total的高度，而总的来说仍然在某种程度上取决于内容 - 所以我可以将左侧和右侧的内容置于中心位置总计（红色）中间有margin-top，margin-bottom = auto;

1）我不能把固定高度放在Total上，这确实可以固定高度，但是内容会在缩小时溢出（否则它只是荒谬的空洞）。

2）这是用于清楚了解我想要实现的内容的元素视频。我也希望没有js。 https://my.mixtape.moe/kxoobz.webm

Answer 1

您可以使用flexbox来实现您的目标：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: