如何根据文本内容使所有div的高度相同？

Question

我仍然遇到一个长期存在的问题.简而言之,我的网站在无序列表中有3个列表项.在我的演示中,列表是绿色框.每个列表项包含一个图像和3个div(标题框,位置框,价格框).我这里只关注标题框.我的演示站点在这里:

您可以看到每个标题框如何具有不同长度的文本,这会推动位置/价格下降.我把彩色标题框变成了灰色所以你可以看到它们.我希望所有标题框高度与最大标题框的高度相匹配.我附上了我想要的截图.

这是CodePen中的演示链接 - 你能帮忙调整一下吗？ http://codepen.io/anon/pen/azJKYM

主要的无序列表项(包含所有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;
                    }

单个列表项(绿色框)有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;
                    }

并且标题框有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;

}

谢谢你的帮助!所需结果的屏幕截图如下.

Answer 1

据我所知,这不能用CSS完成,因为这些元素不是兄弟姐妹.如果结构不同,你可以设置它们display: table-cell,它们会相互调整.我相信它的唯一方法是在当前的标记中使用一个小的javascript.

你可以简单地遍历页面上的每一个,看看那个高度是否大于前一个高度,最后将它们全部设置为最高的高度:

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

UPDATE

要找到最高的一组三个的,你可以通过先了解一下.titlebox的每个父母ul,然后运行该脚本的其余部分:

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