css - 创建一个可能包含两个或三个元素的相同高度的按钮

Question

我正在尝试创建三个按钮，每个按钮都有不同数量的组件。而且他们的高度必须相同。但我无法实现它。

我试过在外部 div 上使用 max-height，但我想它不起作用。

你能帮我解决一下吗，我该如何实现？

 .button {
    background-color: #fff;
    border: 1px solid rgb(0, 214, 0);
    border-radius: 3px;
    padding: 4px;
    margin-top: 10px;
    margin-left: 4px;
    text-align: center;
    white-space: nowrap;
    word-wrap: break-word;
    outline: none;
    cursor: pointer;
  }
  .alttext {
    /* display: block; */
    color: rgb(206, 55, 18);
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    width: 50px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .active {
    border: none;
    background-color: #06bace;
    box-shadow: 0 3px 4px 0 #d3f6fa;
    color: #fff;
  }
  
  .main-text {
    display: block;
    font-weight: 500;
    font-size: 11px;
    line-height: 13px;
    color: rgb(4, 167, 4);
  }
  
  .sub-text {
    display: block;
    font-size: 9px;
    color: rgb(7, 177, 7);
  }

  <div class="button-box"> 
    <button class='button'>
    <span class='main-text'>Main Text</span> 
    </button> 
    </div> 
    <div class="button-box">
 <button class='button'> 
<span class='main-text'>Main Text</span> 
<span class="sub-text">Sub Text</span> 
</button> 
</div>
 <div class="button-box"> 
<button class='button'> 
<span class='main-text'>Main Text</span> 
<span class="sub-text">Sub Text</span> 
</button> <div class="altText">Alt Text</div> 
</div>

Answer 1

尝试使用 display: flex;。希望这段代码有帮助

.button {
  background-color: #fff;
  border: 1px solid rgb(0, 214, 0);
  border-radius: 3px;
  padding: 4px;
  margin-top: 10px;
  margin-left: 4px;
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  outline: none;
  cursor: pointer;
}

.alttext {
  /* display: block; */
  color: rgb(206, 55, 18);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  width: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.active {
  border: none;
  background-color: #06bace;
  box-shadow: 0 3px 4px 0 #d3f6fa;
  color: #fff;
}

.main-text {
  display: block;
  font-weight: 500;
  font-size: 11px;
  line-height: 13px;
  color: rgb(4, 167, 4);
}

.sub-text {
  display: block;
  font-size: 9px;
  color: rgb(7, 177, 7);
}

.d-flex {
  display: flex;
  display: -ms-flexbox;
}

.flex-row {
  flex-direction: row;
  -ms-flex-direction: row;
}

<div class="d-flex flex-row">
  <button class='button'>
        <span class='main-text'>Main Text</span>
    </button>
  <button class='button'>
        <span class='main-text'>Main Text</span>
        <span class="sub-text">Sub Text</span>
    </button>
  <div>
    <button class='button'>
        <span class='main-text'>Main Text</span>
        <span class="sub-text">Sub Text</span>
    </button>
    <div class="altText">Alt Text</div>
  </div>

</div>