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

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

你錯過了在列元素

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

Answer 2

現在.col，您col-2類不會讓你的div float:left;

兩種可能性：

• 您的類col添加到您的div
• 您開始設置與col到float:left;所有類你可以這樣來做：[class^="col"] { float:left; }

嗯，我還沒有看到你正在使用className而不是class，所以你可以相應地改變它：[className^="col"] { float:left; }