我做了一个12列的网格，它工作，我测试的那一刻，（6和6列）我看到页面的边框和我的文本之间没有边距。当我添加一个边距时，2列不排成一行并且在彼此之下。我怎么能解决这个问题？
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body{
width: 100%;
background-color: white;
margin: 0 auto;
}
.wrap{
width: 100%;
margin: 0;
padding: 0;
position: relative;
height:38.45px;
background-color: #053367;
border-bottom: 1px solid black;
}
/* position of the navbar */
.navbar{
margin: 0;
padding: 0;
overflow: auto;
width: 100%;
}
/* decoration of navbar buttons, center the text, put inline, width of each button, ... */
.navbar li{
display: inline-block;
position: relative;
width: 120px;
padding: 10px 0px;
float: left;
color: white;
font-size: 16px;
cursor: pointer;
text-align: center;
text-transform: Uppercase;
}
/* Styling of the links in the navbar */
.navbar li a{
text-decoration: none;
color: white;
}
/* padding so the dropdown menu get underneath the navbar */
.navbar li ul{
padding-top: 10px;
}
/* hover transition for the links */
.drop-content li:hover{
transition-property: background-color;
transition-delay: 0.1s;
transition-duration: 0.5s;
background-color: #009900;
height: auto;
}
/* styling of the dropdown content box */
.drop-content li{
text-align: left;
background-color: white;
color: black;
padding: 10px;
margin: 0;
box-shadow: 0px 1px 0px 1px hsl(0, 0%, 15%);
}
/* give active page a color */
.active{
background-color: #009900;
}
/* dropdown menu box positioning */
.drop-content{
margin: 0;
padding: 0;
position: relative;
display: none;
text-align: left;
}
/* drop the menu on hover */
.navbar li:hover .drop-content{
display: block;
}
footer{
background-color: #003566;
height: 15em;
}
/* Grid */
.row{
font-size: 0px
}
/* display the col- inline */
.row:before,
.row:after{
content: "";
clear: both;
display: inline;
}
/* styling of the col- */
[class*='col-']{
float: left;
font-size: 16px;
padding-right: 5px;
max-width: 1200px;
min-height: 1px;
margin-left: 10px;
text-align: center;
}
/* added padding not applying to last element */
[class*='col-']:last-of-type{
padding-right: 0;
}
/* container for the grid, will not exceed max width */
.grid-container{
max-width: 100%;
}
/* padding around the col-*/
.row-pad{
padding: 10px 10px 10px 10px;
}
/* defining the colums */
.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.3%;}
.col-5{width: 41.66%;}
.col-6{width: 50%;}
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}
.well{
text-align: left;
background-color: #e0e0eb;
border: 1px solid #e1e1ec;
border-radius: 5px;
padding: 10px;
}<nav>
<div class="wrap">
<ul class="navbar">
<li class="active"><a href="#">Home</a></li>
<li>Link 1
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 2
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 3
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</div>
</nav>
<div class="row">
<article>
<div class="col-6">
<p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p>
</div>
<div class="col-6">
<p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p>
</div>
</article>
</div>
答案 0 :(得分：2)
你应该考虑盒子模型。实际上，当你有两个宽度为50％的元素时，没有额外的区域可以为保证金添加10px（你甚至没有1px）。 所以，你应该使用百分比 例如： 这个：.col-6 {宽度：49％;} 在[class * ='col-']里面，这个：margin-left：1％;
*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body{
width: 100%;
background-color: white;
margin: 0 auto;
}
.wrap{
width: 100%;
margin: 0;
padding: 0;
position: relative;
height:38.45px;
background-color: #053367;
border-bottom: 1px solid black;
}
/* position of the navbar */
.navbar{
margin: 0;
padding: 0;
overflow: auto;
width: 100%;
}
/* decoration of navbar buttons, center the text, put inline, width of each button, ... */
.navbar li{
display: inline-block;
position: relative;
width: 120px;
padding: 10px 0px;
float: left;
color: white;
font-size: 16px;
cursor: pointer;
text-align: center;
text-transform: Uppercase;
}
/* Styling of the links in the navbar */
.navbar li a{
text-decoration: none;
color: white;
}
/* padding so the dropdown menu get underneath the navbar */
.navbar li ul{
padding-top: 10px;
}
/* hover transition for the links */
.drop-content li:hover{
transition-property: background-color;
transition-delay: 0.1s;
transition-duration: 0.5s;
background-color: #009900;
height: auto;
}
/* styling of the dropdown content box */
.drop-content li{
text-align: left;
background-color: white;
color: black;
padding: 10px;
margin: 0;
box-shadow: 0px 1px 0px 1px hsl(0, 0%, 15%);
}
/* give active page a color */
.active{
background-color: #009900;
}
/* dropdown menu box positioning */
.drop-content{
margin: 0;
padding: 0;
position: relative;
display: none;
text-align: left;
}
/* drop the menu on hover */
.navbar li:hover .drop-content{
display: block;
}
footer{
background-color: #003566;
height: 15em;
}
/* Grid */
.row{
font-size: 0px
}
/* display the col- inline */
.row:before,
.row:after{
content: "";
clear: both;
display: inline;
}
/* styling of the col- */
[class*='col-']{
float: left;
font-size: 16px;
padding-right: 5px;
max-width: 1200px;
min-height: 1px;
margin-left: 1%;
text-align: center;
}
/* added padding not applying to last element */
[class*='col-']:last-of-type{
padding-right: 0;
}
/* container for the grid, will not exceed max width */
.grid-container{
max-width: 100%;
}
/* padding around the col-*/
.row-pad{
padding: 10px 10px 10px 10px;
}
/* defining the colums */
.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.3%;}
.col-5{width: 41.66%;}
.col-6{width: 49%;}
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}
.well{
text-align: left;
background-color: #e0e0eb;
border: 1px solid #e1e1ec;
border-radius: 5px;
padding: 10px;
}<nav>
<div class="wrap">
<ul class="navbar">
<li class="active"><a href="#">Home</a></li>
<li>Link 1
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 2
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 3
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</div>
</nav>
<div class="row">
<article>
<div class="col-6">
<p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p>
</div>
<div class="col-6">
<p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p>
</div>
</article>
</div>
答案 1 :(得分：2)
您应该从margin-left移除[class*='col-']，然后您可以左右填充.row
.row{
font-size: 0px;
padding:0 10px;
}
在这里演示：https://jsfiddle.net/IA7medd/pou8gxj6/
另一个解决方案：您可以使用clac（）函数，该函数适用于现代浏览器：
.col-6{
width: calc(50% - 10px)
}
点击此处了解有关计算的更多信息：http://www.w3schools.com/cssref/func_calc.asp