Question

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

我怎样才能实现这一目标？到目前为止，这是JSFiddle： -

<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上测试

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle DEMO 1 （更多与您类似的嵌套内容）

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

在后一个示例中，您可以在＆＃34; dynamic＆＃34;之间切换。或者＆＃34;固定＆＃34;只删除max-width / max-height

的网格大小

保持2个div的高度相同，即使它们的内容被过滤后也是如此

1 个答案: