如何確保列中包含一行

Question

我想創建一個具有六列的CSS網格系統。您可以看到html和css at this jsfiddle的輸出。問題似乎是列溢出了它們應該包含的行。例如，即使一行應該能夠保存六個'大小爲1'的列，我的例子中的第六列溢出到另一列行。我該如何解決這個問題，以便每行所需的列數不超過行的寬度？

<div class="grid-container outline"> 
     <div class="row"> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
     </div> 
     <div class="row"> 
      <div class="col-2"><p>col-2</p></div> 
      <div class="col-2"><p>col-2</p></div> 
      <div class="col-2"><p>col-2</p></div> 
     </div> 
     <div class="row"> 
      <div class="col-3"><p>col-3</p></div> 
      <div class="col-3"><p>col-3</p></div> 
     </div> 
    </div> 

CSS

.grid-container{ 
    width: 100%; 
    max-width: 1200px;  
} 

/*-- cleafix hack -- */ 
.row:before, 
.row:after { 
    content:""; 
     display: table ; 
    clear:both; 
} 

[class*='col-'] { 
    float: left; 
    min-height: 1px; 
    width: 16.66%; 
    /*-- gutter -- */ 
    padding: 12px; 
    background-color: #FFDCDC; 
} 

.col-1{ width: 16.66%; } 
.col-2{ width: 33.33%; } 
.col-3{ width: 50%; } 
.col-4{ width: 66.66%; } 
.col-5{ width: 83.33%; } 
.col-6{ width: 100%; } 

.outline, .outline *{ 
    outline: 1px solid #F6A1A1; 
} 

/*-- some extra column content styling --*/ 
[class*='col-'] > p { 
background-color: #FFC2C2; 
padding: 0; 
margin: 0; 
text-align: center; 
color: white; 
} 

Answer 1

我相信你正在尋找：

div { 
    box-sizing:border-box; 
} 

jsFiddle example

參見：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing