jquery - 保持 2 个 div 的高度相同，即使在它们内部的内容被过滤后

Question

我有 2 个并排显示的 div。每个 div 都包含一些带有一些内容的嵌套 div。我想保持两个 div 的高度相等，即使其中一个 div 中的内容被删除。这意味着 div 应该正确对齐。

我怎样才能做到这一点？到目前为止，这是 JSFiddle:-

[链接] https://jsfiddle.net/k6fjavrr/1/

<div class="fContainer">      
  <div class="final-container">
    <div class="textIc" id="partition-5">
      <p>Introduction</p>
      <p style="font-weight:bolder;color:black;">Appréciation</p>
      <p style="font-weight:bolder;color:black;">Primary</p>
    </div>

    <div class="textIc" id="partition-5" >
      <p>Chapter 1</p>
      <p style="font-weight:bolder;color:black;">Appréciation</p>
      <p style="font-weight:bolder;color:black;">Secondary</p>
    </div>

    <div class="textIc" id="partition-5" style="">
      <p>Chapter 2</p>
      <p style="font-weight:bolder;color:black;">Appréciation</p>
      <p style="font-weight:bolder;color:black;">Tertiary</p>
    </div>    
  </div> 

  <div class="final-container-2">
    <div class="textIc" id="partition-5" style="">
      <p>Chapter 3</p>
      <p style="font-weight:bolder;color:black;">Creation</p>
      <p style="font-weight:bolder;color:black;">Tertiary</p>
    </div>  

    <div class="textIc" id="partition-5" style="">
      <p>Chapter 3</p>
      <p style="font-weight:bolder;color:black;">Creation</p>
      <p style="font-weight:bolder;color:black;">Secondary</p>
    </div>  

    <div class="textIc" id="partition-5" style="">
      <p>Chapter 3</p>
      <p style="font-weight:bolder;color:black;">Creation</p>
      <p style="font-weight:bolder;color:black;">Primary</p>
    </div>  

    <div class="textIc" id="partition-5" style="">
      <p>Chapter 3</p>
      <p style="font-weight:bolder;color:black;">Creation</p>
      <p style="font-weight:bolder;color:black;">Primary/Secondary</p>
    </div>     
</div>    

Answer 1

试试这是否能解决您的问题，只要使用您需要的.row即可

在 Chrome 60 和 Firefox 55 上测试

.cont {
    display: flex;
    justify-content: center;
    height: 200px;
}
.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.row {
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden; /* fix FF columns */
    border: 1px solid #000;
}

<div class="cont">
    <div class="column">
        <div class="row"><h3>sdyguyfsud</h3></div>
        <div class="row"><h3>sdyguyfsud</h3></div>
    </div>
    <div class="column">
        <div class="row"><h3>sdyguyfsud</h3></div>
        <div class="row"><h3>sdyguyfsud</h3></div>
        <div class="row"><h3>sdyguyfsud</h3></div>
    </div>
</div>

Fiddle DEMO 1 (更多类似你的嵌套内容)

Fiddle DEMO 2 (自动溢出，滚动内容的最大宽度和最大高度)

在后一个示例中，您可以通过删除最大宽度/最大高度来在“动态”或“固定”网格大小之间切换