如何为显示 flex 子项设置相同的高度？

Question

有什么办法可以说“TEST 1.1”行仅使用CSS与“TEST 1 TEST 1 TEST 1 TEST 1 TEST 1”具有相同的高度？ 如果“TEST 2”行包含更多文本，则“TEST 2.1”行的高度应与“TEST 2”相同。

HTML 结构和标记应该保持原样。

编辑：或者有没有一种简单的方法可以用 JS 做到这一点？

 .outer { display: flex; width: 200px; } .inner {flex: 1 1 50%} .inner-child { background-color: lightgrey; padding: 10px; border: 1px dotted; }

 <div class="outer"> <div class="inner"> <div class="inner-child"> TEST 1 TEST 1 TEST 1 TEST 1 TEST 1 </div> <div class="inner-child"> TEST 2 </div> <div class="inner-child"> TEST 3 </div> <div class="inner-child"> TEST 4 </div> </div> <div class="inner"> <div class="inner-child"> TEST 1.1 </div> <div class="inner-child"> TEST 2.1 </div> <div class="inner-child"> TEST 3.1 </div> <div class="inner-child"> TEST 4.1 </div> </div> </div>

Answer 1

您应该考虑使用css grid 。

Flexbox 旨在创建一个水平或垂直的一维数组。

虽然 css grid 旨在容纳二维数组（同时水平和垂直。）

 .outer { display: grid; grid-template-columns: 1fr 1fr; width: 200px; } .inner-child { background-color: lightgrey; padding: 10px; border: 1px dotted; }

 <div class="outer"> <div class="inner-child"> TEST 1 TEST 1 TEST 1 TEST 1 TEST 1 </div> <div class="inner-child"> TEST 1.1 </div> <div class="inner-child"> TEST 2 </div> <div class="inner-child"> TEST 2.1 </div> <div class="inner-child"> TEST 3 </div> <div class="inner-child"> TEST 3.1 </div> <div class="inner-child"> TEST 4 </div> <div class="inner-child"> TEST 4.1 </div> </div>

Answer 2

稍微更改 html 并添加display: flex在内部类中，您可以执行与您正在寻找的类似的操作。 下面是一个例子：

 .outer { width: 200px; } .inner { display: flex; width: 100%; } .inner-child { width: 50%; background-color: lightgrey; padding: 10px; border: 1px dotted; }

 <div class="outer"> <div class="inner"> <div class="inner-child">TEST 1 TEST 1 TEST 1 TEST 1 TEST 1</div> <div class="inner-child">TEST 1.1</div> </div> <div class="inner"> <div class="inner-child">TEST 2</div> <div class="inner-child">TEST 2.1</div> </div> </div>

Answer 3

由简单的 jQuery 完成

 $(".outer .inner:first .inner-child").each(function(i,e){ i += 1; if($(".outer .inner:last .inner-child:nth-child("+i+")").length) { var heightInFirst = $(this).height(); var heightInSecond = $(".outer .inner:last .inner-child:nth-child("+i+")").height(); $(".outer .inner .inner-child:nth-child("+i+")").css("height",Math.max(heightInFirst, heightInSecond)+"px"); } });

 .outer { display: flex; width: 200px; } .inner {flex: 1 1 50%} .inner-child { background-color: lightgrey; padding: 10px; border: 1px dotted; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="outer"> <div class="inner"> <div class="inner-child"> TEST 1 TEST 1 TEST 1 TEST 1 TEST 1 </div> <div class="inner-child"> TEST 2 </div> <div class="inner-child"> TEST 3 </div> <div class="inner-child"> TEST 4 </div> </div> <div class="inner"> <div class="inner-child"> TEST 1.1 </div> <div class="inner-child"> TEST 2.1 </div> <div class="inner-child"> TEST 3.1 </div> <div class="inner-child"> TEST 4.1 </div> </div> </div>