html - 如何对齐 div 和 span

Question

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%; }
}

我想检查用户网络速度并显示它们。左侧区域设置 height:90px ，右侧也是 90px 。

我不知道为什么会有空白区域，比如填充区域。我将 div 更改为 span 并将 span 更改为 div，但它不起作用。

代码在这里 https://jsfiddle.net/kooyh/4pu9xtrz/2/

请帮助调整这一点。

标签： htmlcss

Answer 1

添加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;
}

https://jsfiddle.net/lalji1051/7xgp0fc2/1/