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

Question

我尝试制作一个由 4 个 div 组成的网格，这些 div 的位置为 2x2。在这些 div 之间，我想要一个宽度为 1 像素的边框，基本上看起来像这样:

1|2
-+-
3|4

div 的大小必须相等，并且总的来说它们需要以任何分辨率全屏显示。我的第一个想法是为行制作 2 个 div，在每个 div 中为列制作 2 个 div，向左浮动。到目前为止，我的行工作得很好，但是只要我在 div 之间添加边框，就会显示一个滚动条。很明显，边框不包含在 width: 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>

我还尝试让代码在 fiddle 演示中工作:DEMO但出于某种原因，height: 100% on body 和/或 html 将不起作用。

Answer 1

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

Demo

我在这里做的是让 4 个 div 元素向左浮动，每个 50% 宽并且使用了 box-sizing 属性所以边框不会中断 div 对齐。这些 div 元素在 width 中为 50%，在 height 中为 50%/p>

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