Flex盒内部物品具有相同的高度

Question

想知道如何使用flexbox在所有列中使用相同高度的标题（深红色部分）？标题需要与组中最高的标题一样高。

所以在下面这个例子中，事件2＆amp;事件3标题需要与“真正长事件标题”标题的高度相同。

标记看起来像这样

<div class="event">
   <div class="event__header">
     <h1>Event Title</h1>
   </div>
   <div class="event__content">
     ...
   </div>
</div>

提前致谢

Answer 1

Flexbox不是一个选项，因为它们位于不同的div中。如果您正在使用jQuery，那么您可以使用以下代码段实现此目的。

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".event_header").length;i++){
    if($(".event_header").eq(i)){
      var currentHeight = $(".event_header").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".event_header").height(maxHeight);
});

这是一个实例：

$(document).ready(function (){
  var maxHeight = 0;
  for(i=0;i<$(".event_header").length;i++){
    if($(".event_header").eq(i)){
      var currentHeight = $(".event_header").eq(i).height();
      if(currentHeight>=maxHeight){
        maxHeight = currentHeight;
      }
    }
    else{
      break;
    }
  }
  $(".event_header").height(maxHeight);
})

*{
  box-sizing:border-box;
}
.conDiv{
  border:1px sold black;
  float:left;
  width:33%;
  margin:0;
  padding:10px;
  height:300px;
  background-color:green;
}
.contentDiv{
  height:200px;
  width:100%;
  margin:0;
  padding:0;
  background-color:red;
}
.event_header{
  width:100%;
  margin:0;
  padding:0;
  background-color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">This is a really really really really really really  reallyreally really really really long title</h2>
      <div class="contentDiv"></div>
    </div>

Answer 2

您需要在

中为event_header指定最小高度

.event__header{min-height:100px}

Answer 3

如果您可以将带有标题的所有div包装到父div中，则可以使用弹性框实现此目的。如果可以，将父div的显示设置为flex应该为您完成。

.parent {
  display:flex;
}

这可能有所帮助：https://jsfiddle.net/75xoj1so/

Answer 4

*{
  box-sizing:border-box;
}
.conDiv{
  border:1px sold black;
  float:left;
  width:33%;
  margin:0;
  padding:10px;
  height:300px;
  background-color:green;
}
.contentDiv{
  height:150px;
  width:100%;
  margin:0;
  padding:0;
  background-color:red;
}
.event_header{
  width:100%;
  margin:0;
  padding:0;
  background-color:white;
  min-height:100px
}

<div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">this is title</h2>
      <div class="contentDiv"></div>
    </div>
    <div class="conDiv">
      <h2 class="event_header">This is a really really really really really really  reallyreally really really really long title</h2>
      <div class="contentDiv"></div>
    </div>