html - CSS - make all elements the same height as the tallest element

Question

Welcome To Ask or Share your Answers For Others

html - CSS - make all elements the same height as the tallest element

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - CSS - make all elements the same height as the tallest element

I have a problem where I have three floating buttons in a div. one of the buttons has more content that the others, so it's taller.

I want to be able to make all buttons the same height as the tallest button. I tried height: 100%; but that didn't work.

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    .container {
      width: 320px;
    }
    
    .container button {
      float: left;
      background: #FFFFFF;
      border: 1px solid #CCCCCC;
      width: 33.33%;
    }
  </style>
</head>

<body>
  <div class="container">
    <button>
                <span class="big-text">Okay</span>
                <span class="little-text">123</span>
            </button>
    <button>
                <span class="big-text">Another Option</span>
                <span class="little-text">456</span>
            </button>
    <button>
                <span class="big-text">Nah!</span>
                <span class="little-text">789</span>
            </button>
  </div>
</body>

</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:51:22+0000

Just add display:flex to your container class like this:

.container {
    width: 320px;
    display:flex;
}

jsFiddle: https://jsfiddle.net/AndrewL32/xpdxyaz6/2/

NOTE:

As of May 2021, the Flex property compatibility for browsers are as follows:

Google Chrome Partial support with prefix v4 - v20 | Full support with prefix v21 - v28 | Full support v29+

Mozilla Firefox Partial support with prefix v2 - v21 | Partial support v22 - v27 | Full Support v28+

Internet Explorer Partial support with prefix v10 | Partial support with prefix v11+

Safari Partial support with prefix v3.1 - v6 | Full support with prefix v6.1 - v8 | Full Support v9+

Edge Full support v12+

Categories

html - CSS - make all elements the same height as the tallest element

html - CSS - make all elements the same height as the tallest element

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags