<div class="row">
<div class="col-md-4">
<div class="ticket_statistic_box">
<div class="row">
<div class="col-sm-5 iconarea">
<span class=" fa fa-briefcase ticket-icon"></span>
</div>
<div class="col-sm-6">
<div class="ticket_statistic_box_information">
<span>Total</span>
<span>0</span>
</div>
</div>
</div>
</div>
</div>
</div>
我已将.iconarea
的背景设置为白色,这是行中故障单统计框的左侧部分,结果如下:
看左边的那个,看看右边的那个,它应该只填充.ticket_statistic_box
的背景部分,但是它出去了吗?
.ticket_statistic_box {
height: 100px;
background-color: rgba(0, 0, 0, 0.3);
display: block;
margin-top: 10px;
text-align: center;
}
.ticket_statistic_box span.ticket-icon {
line-height: 110px;
}
.ticket_statistic_box_information span {
display: block;
padding: 0;
}
.ticket_statistic_box_information span:first-child {
font-weight: bold;
font-size: 20px;
text-align: center;
margin-top: 15px;
}
.ticket_statistic_box_information span:last-child {
font-weight: bold;
font-size: 30px;
text-align: center;
color: #eda248;
}
.ticket-icon {
color: #eda248;
font-weight: lighter;
font-size: 50pt;
}
.iconarea {
background-color: white;
}
我在这里做过一些令人讨厌的错误吗?
答案 0 :(得分:1)
可能是其中之一,因为这可能比其父div更高。
.ticket_statistic_box span.ticket-icon {
line-height: 110px;
}
.ticket-icon {
font-size: 50pt;
}
答案 1 :(得分:0)
.ticket-icon
的字体较大,使其大于其所在的.iconarea
框。它迫使盒子变大。因此,如果你使字体变小,它应该修复它。或者不是字体大小,更改行高。你的行高很大。