[英]How to Align div and span
HTML
<div class="summury-text multi-line">
<div class="left-text"><span>Speed</span></div>
<div class="multi-line-item">
<span class="right-text meter">
<span style="width:60%">
<span class="progress info"></span>
</span>
<span class="meter-text">UP 257,008 byte</span>
</span>
<div class="devider"></div>
<span class="right-text meter">
<span style="width:80%">
<span class="progress warning"></span>
</span>
<span class="meter-text">DOWN 10,024,600 byte</span>
</span>
</div>
</div>
CSS
.summury-text{width:500px;margin:0 auto;}
.devider{height:10px;}
.summury-text span{display:table-cell;}
.summury-text.multi-line{height:90px;}
.summury-text.multi-line .left-text{line-height:90px;}
.summury-text .multi-line-item{display:table-cell;height:40px;}
.summury-text .left-text{width:150px;background-color:#005fff;color:#fff;display:table-cell;line-height:90px;}
.summury-text .right-text{width:350px;}
.summury-text .right-text.meter{text-align:left;height: 40px;line-height:40px; position: relative;background: #f3efe6;overflow: hidden;}
.summury-text .right-text.meter span {display: block;height: 100%;}
.summury-text .right-text.meter span.meter-text{text-align:center;position:absolute;top:0;bottom:0;left:0;right:0;}
.progress {
-webkit-animation: progressBar 3s ease-in-out;
-webkit-animation-fill-mode:both;
-moz-animation: progressBar 3s ease-in-out;
-moz-animation-fill-mode:both;
text-align:left;
}
.progress.danger {background-color:#dc3545}
.progress.success {background-color:#28a745}
.progress.info {background-color:#17a2b8}
.progress.primary {background-color:#007bff}
.progress.warning {background-color:#ffc107}
@-webkit-keyframes progressBar {
0% { width: 0; }
100% { width: 100%; }
}
@-moz-keyframes progressBar {
0% { width: 0; }
100% { width: 100%; }
}
我想检查 user.network 速度并显示它们。 左边区域设置高度:90px,右边也是90px。
我不知道为什么会有填充区域之类的空白区域。 我将 div 更改为 span 并将 span 更改为 div,但它没有用。
代码在这里https://jsfiddle.net/kooyh/4pu9xtrz/2/
请帮助调整这一点。
添加vertical-align: top;
.summury-text.left-text
.summury-text .left-text {
width: 150px;
background-color: #005fff;
color: #fff;
display: table-cell;
line-height: 40px;
text-align: center;
vertical-align: top;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.