html - 具有响应式网页设计的边框

Question

我正在使用从 W3Schools. 获得的信息，使用响应式网页设计创建一个网站

CSS 非常简单

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.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%;}

每一列都按百分比设置为屏幕的特定宽度。

我想要的是在页面上并排放置 6 个“col-2”类 div 元素，直到我添加边框为止。

div 元素

<div class="col-2 greenBorder">Data/info goes here</div>

greenBorder CSS 类

.greenBorder{
  border-style:solid;
  border-width:2px;
  border-color:#16842e;
}

我需要做什么才能使这些 div 元素都适合，同时仍然有边框？

Answer 1

为你的box-sizing使用一个border-box:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

原因是，默认情况下，所有的box-model都是content-box，所以border使得 width 变大 2px。你可以在这里看到原因:

_{(来源:binvisions.com)}