我尝试在2×2位置形成一个4格的网格.在这些div之间我想要一个宽度为1像素的边框,基本上看起来像这样：
1|2 -+- 3|4
div必须在大小上相等,并且总体上需要以任何分辨率全屏显示.我的第一个想法是为行创建2个div,并在每个div中为列添加2个div,向左浮动.到目前为止,我有完美的行,但只要我添加div之间的边框就会出现一个滚动条.显然,边框不包括在宽度中：50％.我怎样设法得到这个？
到目前为止这是我的代码.
CSS
html,body
{
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
}
.row
{
Width: 100%;
Height: 50%;
}
.border
{
border-bottom: 1px solid black;
}
HTML
<div class="row border" style="background-color: red;">
</div>
<div class="row" style="background-color: blue">
</div>
解决方法
你需要这样的东西吗？我是从头开始做的……
这里做的是有4个div元素浮动到左边,每个50％宽,并使用Box-sizing属性,以便边框不会中断div对齐.这些div元素的宽度为50％,高度为50％
<div></div>
<div></div>
<div></div>
<div></div>
* {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
html,body {
height: 100%;
width: 100%;
}
div {
width: 50%;
height: 50%;
float: left;
}
div:nth-of-type(1) {
background: #ccc;
}
div:nth-of-type(2) {
background: #bbb;
border-left: 1px solid #f00;
}
div:nth-of-type(3) {
background: #aaa;
border-top: 1px solid #f00;
}
div:nth-of-type(4) {
background: #ddd;
border-top: 1px solid #f00;
border-left: 1px solid #f00;
}
