css3 – 在html中使用div全屏制作2×2网格

我尝试在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>

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

解决方法

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

Demo

这里做的是有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;
}

原文地址：https://www.jb51.cc/css/214689.html