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

为border-box：

使用box-sizing

* {
  -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更大。你可以在这里看到原因：

http://www.binvisions.com/wp-content/uploads/2011/09/css-box-model-border-content_590x328.jpg

响应式网页设计的边界

1 个答案: