Geek Answers Handbook

How to make all the same height based on text content?

I'm still having problems with a long-standing problem. To be brief, there are 3 list items on my site in an unordered list. My demo lists green boxes. Each list item contains an image and 3 divs (title, location, price field). I only deal with the headline. My demo site is here:

You can see how each heading has a different text length, which leads to a decrease in location / price. I colored the headline to be gray so you can see them. I want all the heights of the heading to match the height of the largest heading. I added a screenshot of what I wanted.

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

The main unordered list item (contains all 3 green boxes) has 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;
                    }

In a separate list item (green square) there is 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 header has 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! Screenshot with the desired result below.

Desired result

+4
source share
3 answers

As far as I know, this cannot be done using CSS, because these elements are not siblings. If the structure was different, you could set them to display: table-cell, and they will be tuned to each other. The only way I believe this will work in its current markup using a little 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, script:

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

+4

* HTML/CSS -

, , 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

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

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

 h3 {
         text-align center;
    }

, , , div ,

0

script

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

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

0

More articles:


All Articles