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

Question

我仍然遇到 long-standing 问题。简而言之，我的站点在一个无序列表中有 3 个列表项。在我的演示中，列表是绿色框。每个列表项包含一个图像和 3 个 div（标题框、位置框、价格框）。我只关心这里的标题框。我的演示站点是 here:

您可以看到每个标题框如何具有不同长度的文本，这将 location/price 向下推。我已将标题框着色为灰色，以便您可以看到它们。我希望所有标题框的高度与最大标题框的高度相匹配。我附上了我想要的内容的屏幕截图。

这是 CodePen 中的演示 link -- 你能帮忙调整一下吗？ 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

更新

要找到一组三个中最高的，您可以先查看每个父 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

Answer 2

*incase 你正在寻找一个纯粹的 HTML/CSS 解决方案 -

如果我理解正确你想完成什么，那么你分配 div 的方式给你带来了问题。我会尝试将标题和位置放在同一个 div 中，并保持价格 out-side 如下：

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

CSS:

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

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

 h3 {
         text-align center;
    }

这样无论你在 header 里面放什么东西，div 边都会保持不变，位置也会保持不变

Answer 3

您可以将此脚本添加到

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

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

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

How to make all divs same height, based on text content?

html

css

list

height