css - 创建一个可能包含两个或三个元素的相同高度的按钮
问题描述
我正在尝试创建三个按钮,每个按钮都有不同数量的组件。而且它们的高度必须相同。但我无法实现它。
我曾尝试在外部 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>
解决方案
尝试使用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>
推荐阅读
- sql - 在时态表和 AVERAGE 中成功查询后返回非重复值
- jquery - 在另一个函数中使用来自一个函数的变量
- c# - 即使在实现 INotifyPropertyChanged 之后,DataTemplate 中的字典也不会更新 UI
- ios - SwiftUI:如何在背景中模糊的当前视图顶部弹出一个视图?
- python-3.x - 服务总线未在 Azure 上触发,在本地工作
- angular - Angular Material 反应形式:为每个验证器显示不同的错误消息
- css - 为什么我的媒体查询范围不能正常工作?
- vuejs2 - 带有 flex/grid 包装器的 vue 过渡组项目移动到左上角
- android - HTML 原生应用无法在大尺寸手机上正确适配横向模式。不能强行合身
- node.js - JWT 身份验证授权不起作用