我有一个大的 div,.container
,它将包含两个较小的 div,.col
,这将包含更小的独立 div,。内列
。我需要 .col
div 始终具有相同的高度,而每个 .inner-col
div 与其对应的高度相同。我所说的对应物是指当它们并排时它们的高度应该相同。
在这个片段中,我让它几乎按照我想要的方式工作。每个标题都与其并排对应的标题对齐,但有太多的额外空间,更不用说每个 .inner-col
都被硬编码为 600px。有没有一种方法可以让我在没有 JavaScript 的情况下让每个人都与他们对应的 div 正确对齐,而没有多余的空格?
片段
.container {
display: flex;
}
.col {
border: solid;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.inner-col {
height: 600px;
}
<div class="container">
<div class="col">
<div class="inner-col">
<h2>
Lorem Ipsum
</h2>
<p>
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="inner-col">
<h3>
Lorem Ipsum Lorem Ipsum Lorem Ipsum
</h3>
<p>
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
</div>
<div class="col">
<div class="inner-col">
<h2>
Lorem Ipsum Lorem Ipsum
</h2>
<p>
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="inner-col">
<h3>
Lorem Ipsum Lorem Ipsum Lorem Ipsum
</h3>
<p>
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
</div>
</div>
编辑
最初,我找到了this question但这并不是我所需要的。
最佳答案
我认为这是不可能的,您的 div.inner-col 指标永远不会在同级 div.col 中为人所知。看起来很像老式的<table>
大部头书。即使您显示的不是表格数据,按行而不是按列显示不是更有意义吗?
关于javascript - CSS:如何强制较小的div与较大的div高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49591186/