在html中使用div全屏制作2x2网格

Question

我尝试在2x2位置形成一个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>

我还尝试使代码在小提琴演示中运行:DEMO但由于某种原因,身高和/或html的高度100%将无效.

Answer 1

你需要这样的东西吗？我是从头开始做的......

演示

这里做的是有4个div元素浮动到左边,每个元素都50%宽,并且使用了box-sizing属性,因此边框不会中断div对齐.这些div元素50%在width和50%中height

<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;
}