这个 css 'float: left' 来自哪里 -- Jekyll

Question

我正在使用 Jekyll CMS

header有一个基本结构

<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。

但是，您可以在检查元素的屏幕截图中看到 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');

这个 css 'float: left' 来自哪里 -- Jekyll

Where is this css ' float: left ' coming from -- Jekyll

css

sass

css-float

jekyll