css - HTML SASS 简单网格系统放置元素不正确

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

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

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

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