html - 总览框的固定高度
问题描述
我想在使用这种风格时固定每个盒子的高度。
这是我用于此概览框的 CSS 和 HTML 代码以供参考。可能你不会得到和我一样的用户界面,我放的图片就是我想要修复的。
如果跨度得到更长的值,框高度会自动增加。我想在仍然使用这种格式的概述项目的同时防止这种结果
.ohs-text-overview h2{
font-weight: 300;
color: #fff;
font-size: 36px;
line-height: 1;
margin-bottom: 5px;
}
.ohs-text-overview span{
font-size: 18px;
color: rgba(255, 255, 255, 0.6);
}
/* ----- Overview ----- */
.ohs-overview-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 767px) {
.ohs-overview-wrap {
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.ohs-overview-wrap .button {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-moz-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.ohs-overview-wrap h2 {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-moz-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
}
.ohs-overview-item {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 30px;
padding-bottom: 0;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
@media (min-width: 992px) and (max-width: 1519px) {
.ohs-overview-item {
padding-left: 15px;
padding-right: 15px;
}
}
.ohs-overview-item--c1 {
background-image: -moz-linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
background-image: -webkit-linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
background-image: -ms-linear-gradient(90deg, #3f5efb 0%, #fc466b 100%);
}
.ohs-overview-item--c2 {
background-image: -moz-linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
background-image: -webkit-linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
background-image: -ms-linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
}
.ohs-overview-item--c3 {
background-image: -moz-linear-gradient(90deg, #ee0979 0%, #ff6a00 100%);
background-image: -webkit-linear-gradient(90deg, #ee0979 0%, #ff6a00 100%);
background-image: -ms-linear-gradient(90deg, #ee0979 0%, #ff6a00 100%);
}
.ohs-overview-item--c4 {
background-image: -moz-linear-gradient(90deg, #45b649 0%, #dce35b 100%);
background-image: -webkit-linear-gradient(90deg, #45b649 0%, #dce35b 100%);
background-image: -ms-linear-gradient(90deg, #45b649 0%, #dce35b 100%);
}
.ohs-overview-box .icon {
display: inline-block;
vertical-align: top;
margin-right: 15px;
}
.ohs-overview-box .icon i {
font-size: 60px;
color: #fff;
}
@media (min-width: 992px) and (max-width: 1199px) {
.ohs-overview-box .icon {
margin-right: 3px;
}
.ohs-overview-box .icon i {
font-size: 30px;
}
}
@media (max-width: 991px) {
.ohs-overview-box .icon {
font-size: 46px;
}
}
<div class="row m-t-25" id="corrective_action_summary_ii" style="text-align: center;">
<div class="col-md">
</div>
<div class="col-sm">
</div>
<div class="col-sm">
<div class="ohs-overview-item ohs-overview-item--c2">
<div class="ohs-overview__inner">
<div class="ohs-overview-box clearfix">
<div class="ohs-text-overview">
<h2>1</h2>
<span>Action Will Described</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="ohs-overview-item ohs-overview-item--c2">
<div class="ohs-overview__inner">
<div class="ohs-overview-box clearfix">
<div class="ohs-text-overview">
<h2>1</h2>
<span>Action Is In Progress</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
<div class="ohs-overview-item ohs-overview-item--c2">
<div class="ohs-overview__inner">
<div class="ohs-overview-box clearfix">
<div class="ohs-text-overview">
<h2>0</h2>
<span>Action Completed</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm">
</div>
</div>
解决方案
.ohs-overview-item {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 30px;
padding-bottom: 0;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
min-height: 120px;
}
推荐阅读
- python - 当我将 lambda 函数保存在数组中并按位置调用它们时,它总是调用最后一个函数?
- apache-spark - 如何避免连接中的键列名称重复?
- google-chrome - Chrome:凭据管理 API 中介:“静默”确实返回 null、未定义
- c# - 如何将预制件实例化到您碰撞的对象的一侧?
- r - R mlr3 TaskClassif 'termlabels' 必须是长度至少为 1 的字符向量
- android - 更改方向/配置重置运动布局以启动约束集
- javascript - 如果滚动超过 10 次,我的导航栏会自动关闭
- r - 如何使用另一个变量的条件重新编码变量中的类别
- javascript - 历史反应路由器在类组件中不起作用
- r - 根据不同列的不同条件过滤结果