如何根据文本内容使所有div都保持相同的高度?

I'm still having trouble with a long-standing problem. To be concise, my site has 3 list items within an unordered list. In my demo the lists are the green boxes. Each list item contains an image and 3 divs (titlebox,locationbox,pricebox). I'm only concerned with titlebox here. My demo site is here:

我仍然有一个长期存在的问题。为了简洁，我的网站在一个无序列表中有3个列表项。在我的演示中，列表是绿色的盒子。每个列表项包含一个图像和3个div (titlebox、locationbox、pricebox)。我只关心这里的标题栏。我的演示站点在这里:

You can see how each titlebox has different lengths of text, which pushes the location/price down. I've colored titlebox to be grey so you can see them. I want all titlebox heights to match the height of the biggest titlebox. I've attached a screenshot of what I'd like.

您可以看到每个标题框有不同长度的文本，这会降低位置/价格。我把标题框涂成灰色，这样你就能看到了。我希望标题框的高度与最大标题框的高度匹配。我附上了一张我想要的截图。

Here's a demo link in CodePen -- can you help tweak it? http://codepen.io/anon/pen/azJKYM

这是CodePen的一个演示链接——你能帮助调整它吗?http://codepen.io/anon/pen/azJKYM

The main unordered list item (contains all 3 greenboxes) has CSS:

主无序列表项(包含所有3个绿框)具有CSS:

                .list
                    {
                        width: 100%;
                        overflow: hidden;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-flex-wrap: wrap;
                        -ms-flex-wrap: wrap;
                        flex-wrap: wrap;
                    }

The individual list item (green box) has css:

单个列表项(绿色框)有css:

                .list__item
                    {
                       width: 32%;
                       float: left; /* 10 */
                       display: -webkit-flex;
                       display: -ms-flexbox;
                       display: flex;
                       padding-top: 0.625em;
                       padding-bottom: 0.825em;
                       margin-left:1%;
                       margin-right:0%;
                       position:relative;
                       line-height:40px;
                    }

and the titlebox has CSS:

标题栏有CSS:

.titlebox{
    width: 80%;
    height: 10%;
    display: inline-block;
    font-size: 4.2vh;
    font-family: Garamond;
    color: #002000;
    text-align: center;
    line-height: 35px;
    font-weight:bold;
    margin-top: 5%;
    margin-right: 10%;
    margin-bottom: 5%;
    margin-left: 10%;
    background-color:grey;

}

Thanks for any help! The screenshot of desired result is below.

感谢任何帮助!期望结果的屏幕截图在下面。

3 个解决方案

#1

As far as I know this cant be done with CSS because these elements are not siblings. If the structure was different you could make set them to display: table-cell and they would adjust to each other. The only way I beleive this will work in its current markup is using a little javascript.

就我所知，这不能用CSS完成，因为这些元素不是兄弟元素。如果结构不同，可以将它们设置为display: table-cell，它们将相互调整。我确信在当前标记中能够工作的唯一方法是使用一点javascript。

You can simply loop through each of these on the page, see if that height is greater than a previous one and at the end set all of them to be the tallest one:

你可以简单地在页面上循环每一个，看看它的高度是否大于之前的高度，最后把它们都设为最高的高度:

var largest = 0; //start with 0

$(".titlebox").each(function(){ //loop through each section
   var findHeight = $(this).height(); //find the height
   if(findHeight > largest){ //see if this height is greater than "largest" height
      largest = findHeight; //if it is greater, set largest height to this one 
   }  
});

$(".titlebox").css({"height":largest+"px"});

CODEPEN

CODEPEN

UPDATE

更新

To find the tallest of a set of three you can first look through the .titlebox of each parent ul and then run the rest of the script:

要找到三组中最高的一组，您可以首先查看每个父ul的.titlebox，然后运行脚本的其余部分:

$("ul").each(function(){ //loop through each first

  var largest = 0;

  $(this).find(".titlebox").each(function(){ //find each .titlebox within its parent (rest is the same)
     var findHeight = $(this).height();
     if(findHeight > largest){
        largest = findHeight;
     }  
  });

  $(this).find(".titlebox").css({"height":largest+"px"}); //update all .titlebox inside of this ul

});

CODEPEN 2

CODEPEN 2

#2

*incase your looking for a pure HTML/CSS solution -

*如果你寻找一个纯HTML/CSS解决方案-

if i understood correctly what your trying to accomplish, so the way you allocate the div's causing you problems. i would try to place the headline and the location in the same div, and keep the price out-side of it like this :

如果我理解正确的话，那么你分配div的方式会给你带来问题。我会试着把标题和位置放在同一个div中，并把价格保持在这样的位置:

<div id="container">
    <div>
        <h2>this title wont affect the location position</h2>
        <p>location</p>
    </div>
    <h3>outside the div</h3>
</div>

CSS:

CSS:

div {
        position: relative;
        width: 200px;
        height: 200px;
        background: yellow;
        text-align: center;
    }

 p {
        position: absolute;
        left: 75px;
        top: 135px;
    }

 h3 {
         text-align center;
    }

this way no matter what you will place inside the header the div side will stay the same and so is the location position

这样，无论您将在页眉中放置什么，div始终保持不变，位置位置也保持不变

#3

You can just add this script to

您可以将此脚本添加到

$(document).ready(function()                
  {
      var maxHeight = Math.max.apply(null, $("div.titlebox").map(function ()
      {
          return $(this).height();
      }).get());
     
      $("div.titlebox").css('height',maxHeight );
  }
)

Updated Code : http://codepen.io/anon/pen/OPpEKj

更新代码:http://codepen.io/anon/pen/OPpEKj