Question

我正在尝试使用SASS构建一个简单的网格系统：

app.scss：

.row,
.col {
  box-sizing: border-box;
}

.row:before,
.row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.col {
  position: relative;
  float: left;
}

.col + .col {
  margin-left: 1.6%;
}

.col-1 {
  width: 6.86666666667%;
}

.col-2 {
  width: 15.3333333333%;
}

.col-3 {
  width: 23.8%;
}

.col-4 {
  width: 32.2666666667%;
}

.col-5 {
  width: 40.7333333333%;
}

.col-6 {
  width: 49.2%;
}

.col-7 {
  width: 57.6666666667%;
}

.col-8 {
  width: 66.1333333333%;
}

.col-9 {
  width: 74.6%;
}

.col-10 {
  width: 83.0666666667%;
}

.col-11 {
  width: 91.5333333333%;
}

.col-12 {
  width: 100%;
}

@media only screen and (max-width: 550px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: auto;
    float: none;
  }

  .col + .col {
    margin-left: 0;
  }
}


// Body
body {
    font-family: $default-font;
    font-weight: normal;
    font-size: 13px;
    color: $text-default;
}

.app {
    width: auto;
    height: 100%;
    border-style: outset;
    border-width: 1px;
    padding: 5px;
}

标题-container.scss：

@import '../App/App.scss';

.header-container {
    border-style: outset;
    border-width: 1px;
    border-radius: 5px;
    padding: 10px;
}

我的HTML：

<header className='header-container'>
    <div className='row'>
        <div className='col-2'>
            <p>Person 1</p>
        </div>
        <div className='col-2'>
            <p>Person 2</p>
        </div>
    </div>
</header>

Person 1出现在Person 2上方，而不是在我希望网格工作的一边。我无法找出错误，但我认为我遗漏了一些基本的东西。帮助赞赏。

Answer 1

您在列元素

上缺少.col

＆＃13;

.row, .col {
  box-sizing: border-box;
}

.row:before, .row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.col {
  position: relative;
  float: left;
}

.col + .col {
  margin-left: 1.6%;
}

.col-1 {
  width: 6.86666666667%;
}

.col-2 {
  width: 15.3333333333%;
}

.col-3 {
  width: 23.8%;
}

.col-4 {
  width: 32.2666666667%;
}

.col-5 {
  width: 40.7333333333%;
}

.col-6 {
  width: 49.2%;
}

.col-7 {
  width: 57.6666666667%;
}

.col-8 {
  width: 66.1333333333%;
}

.col-9 {
  width: 74.6%;
}

.col-10 {
  width: 83.0666666667%;
}

.col-11 {
  width: 91.5333333333%;
}

.col-12 {
  width: 100%;
}

@media only screen and (max-width: 550px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: auto;
    float: none;
  }

  .col + .col {
    margin-left: 0;
  }
}

// Body
body {
  font-family: $default-font;
  font-weight: normal;
  font-size: 13px;
  color: $text-default;
}

.app {
  width: auto;
  height: 100%;
  border-style: outset;
  border-width: 1px;
  padding: 5px;
}

.header-container {
  border-style: outset;
  border-width: 1px;
  border-radius: 5px;
  padding: 10px;
}

＆＃13;

<header class='header-container'>
  <div class='row'>
    <div class='col col-2'>
      <p>Person 1</p>
    </div>
    <div class='col col-2'>
      <p>Person 2</p>
    </div>
  </div>
</header>

＆＃13;

Answer 2

目前，您的col-2课程不会成为您的div float:left;

两种可能性：

您将课程col添加到您的div
您将所有以col开头的班级设置为float:left;您可以这样做：[class^="col"] { float:left; }

好吧，我没有看到您使用className而不是class，因此您可以相应地更改它：[className^="col"] { float:left; }

HTML SASS简单的网格系统无法正常工作

2 个答案: