具有相等高度的弹性盒子内部项目[重复]

Posted 2023-03-07

【中文标题】具有相等高度的弹性盒子内部项目[重复]

【英文标题】：Flex box inner item with equal heights [duplicate]

【发布时间】：2017-05-07 15:52:35

【问题描述】：

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

因此，在下面的示例中，事件 2 和事件 3 标题需要与“非常长的事件标题”标题具有相同的高度。

标记看起来像这样

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

提前致谢

【问题讨论】：

您可能会使用inspect找到最高的高度，并为您的标题元素注入min-height的样式

你必须使用jquery，因为它们都在不同的div中

您可以使用 Zurb Foundation XY Grid：codepen.io/iamrobert/pen/eyeyBB

【参考方案1】：

Flexbox 不是一个选项，因为它们位于不同的 div 中。如果您使用的是 jQuery，那么您可以通过以下 sn-p 来实现。

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

【讨论】：

嗯，是的，在这种情况下并不是真的想使用 jQuery。我不认为这是可能的，但我想我会向社区提出这个问题，以防有人以前做过。还是谢谢！

是的，我也希望有其他方法。

【参考方案2】：

你需要在

中给出event_header的最小高度

.event__headermin-height:100px

【讨论】：

是的，不幸的是，最小高度是没有 javascript 的方法。

设置最小高度并不能提供动态或响应式解决方案，因为内容是可变的，并且平板电脑和移动设备上的文字会分解。

【参考方案3】：

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

.parent 
  display:flex;

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

【参考方案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>