代码之家  ›  专栏  ›  技术社区  ›  Ben Beri

CSS引导列超出行?

  •  0
  • Ben Beri  · 技术社区  · 9 年前
          <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 到白色,这是行中票证统计框的左侧部分,结果如下:

    img

    看看左边,再看看右边,它应该只填充背景部分 .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;
    }
    

    我犯了什么严重的错误吗?

    2 回复  |  直到 9 年前
        1
  •  1
  •   Nicholas    9 年前

    可能是其中之一,因为这可能比其父div的高度更高。

    .ticket_statistic_box span.ticket-icon {
      line-height: 110px;
    }
    
    .ticket-icon {
      font-size: 50pt;
    }
    
        2
  •  0
  •   Sensoray    9 年前

    .ticket-icon 字体较大,使其比 .iconarea 它所在的盒子。它迫使盒子变大。因此,如果你把字体变小,它应该修复它。或者更改行高,而不是字体大小。你的线很高。