这个css'浮动：左'来自哪里 - 杰基尔

Question

我正在使用Jekyll CMS

标题具有基本结构

<div class="top">

</div>


<div class="header-wrapper">

  <div class="header-left"><img src="/assets/images/lawmen1.png" alt="Law and Lawson Attorney at Law Lawyers City State"></div>
  <div class="header-right">
    <ul>
      <li><i class="fa fa-location-arrow fa-2x"></i>250 W. Main Street Suite 2510<br>City, State 90210</li>
      <li><i class="fa fa-mobile fa-2x"></i>(555) 555-555</li>
      <li><i class="fa fa-fax fa-2x"></i>(555) 555-5555</li>
    </ul>
  </div>

</div>

这是css

@import '1-tools/-tools-index';


.top{
  width:100%;
  height: 30px;
  background-color: #1A1A1A;
}


.header-wrapper{

  @include outer-container;
  padding-bottom: 2.5em;


  .header-left{
    @include span-columns(4);
    height: 200px;
    img{
      display:block;
      margin: 0 auto;
      padding: 2.8em;
      height:285px;
      width:325px;
    }
  }

  .header-right{
    margin-top:2.5em;
    height: 200px;

    @include span-columns(8);
    ul{
      li{
        font-family: Garamond;
        color: grey-color-dark;
        font-size: 1.1em;
      }
    }

    i{
      padding:0.2em;
      height: 50px;
      width:50px;
      color: #d3bc5f;
    }
  }
}

所以，你可以看到我没有故意在css中使用float: left。

但是，你可以在inspect元素的截图中看到Jekyll在main.scss中生成了float: left

我在css中使用的语法是否影响了这一点？如 。

<div class = "outside">
 <div class = "left"></div>
 <div class = "right"></div>
</div

.outside {
 .left {

 }
 .right {

 }
 }

可以像这样嵌套css吗？

Answer 1

这来自 _sass / 1-tools / neat / grid / _span-columns.scss 文件。 通过阅读文档，我们了解到我们可以通过执行以下操作将float和显示属性移至table-cell：

@include span-columns(8, 'table');