Question

我正在尝试创建一个包含六列的css网格系统。你可以看到html和css at this jsfiddle的输出。问题似乎是列溢出了它们应该包含的行。例如，即使一行应该能够容纳六个＆＃39;大小为1＆＃39;列，我的示例中的第六列溢出到另一行。我如何解决这个问题，以便每行所需的列数不超过行的宽度？

<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

如何确保列包含在一行中

1 个答案: