Question

我有一个问题，我在div中有三个浮动按钮。其中一个按钮的内容比其他按钮更多，所以它更高。

我希望能够使所有按钮与最高按钮的高度相同。我试过了height: 100%;，但这没效果。

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

https://jsfiddle.net/xpdxyaz6/1/

Answer 1

只需将display:flex添加到容器类中，如下所示：

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

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

注意：

Flex属性仅与以下内容兼容：

谷歌浏览器 v21.0（-webkit - ）

Internet Explorer 上面的v10.0（-ms - ）

Mozilla Firefox v18.0（-moz - ）
上面的
Safari v6.1（-webkit - ）

Opera 上面的v12.10

Answer 2

如何使用min-height？已更新fiddle

＆＃13;

 .container {
   width: 320px;
 }
 .container button {
   float: left;
   background: #FFFFFF;
   border: 1px solid #CCCCCC;
   width: 33.33%;
   min-height: 40px;
 }

＆＃13;

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

＆＃13;

CSS - 使所有元素与最高元素的高度相同

2 个答案: