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网格旨在容纳二维数组（水平和垂直同时放置）

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

如何为显示弹性子级设置相同的高度？

3 个答案: