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

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

Demo

这里做的是向左浮动4个div元素，每个50%宽并使用box-sizing属性，这样边框不会中断{{1}对齐。这些div元素在div中为50%，width中为50%

height

Answer 2

有一个很好的css属性box-sizing可以设置为border-box，以便边框和填充的宽度包含在元素的宽度中。通过这种方式，您还可以根据需要为div添加尽可能多的填充，而不必担心它们变得过宽。

您实际上并不需要将两行包装在单独的div中 - 如果您指定div应该是50％宽，那么如果您准确地将两行放在一行中float他们left。

HTML

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>

CSS

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
}

.box {
    box-sizing: border-box;
    float: left;
    width: 50%;
    height: 50%;
}

/* This is one way of adding borders, 
   if you *always* know that you have exactly 4 cells 
   aligned like this */
.box:first-child {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
.box:nth-child(2) {
    border-bottom: 1px solid black;
}
.box:nth-child(3) {
    border-right: 1px solid black;
}

请参阅http://jsfiddle.net/RBWXe/

边框有点棘手，因为据我所知，你想要它们在你的盒子之间，而不是触摸屏幕的边缘。这要求您准确指定每个框的哪些边应该有边框。

这样做的一种更好的方法，也可以让您稍后更改网格中的方框数量，使用background-color作为边框颜色的body元素，以及将盒子的半个像素缩小到50％（使用calc函数），以容纳它们之间的1px空间。见http://jsfiddle.net/yhRBy/2/

Answer 3

检查这个小提琴：

height代替min-height

http://jsfiddle.net/N6JuV/7/

那是你想要的2X2网格。

您必须确保您的widht％和margin％应该添加到100％。您甚至可以使用小数来获得较小的边距。

EG。 http://jsfiddle.net/N6JuV/8/

Answer 4

这是我的解决方案

<div class="d-table">
   <div class="d-row">
       <div class="d-cell first"></div>
       <div class="d-cell first"></div>
   </div>
   <div class="d-row">
       <div class="d-cell first"></div>
       <div class="d-cell first"></div>
   </div>
</div>

和CSS

.d-table{
   display:table;
   table-layout:fixed;
   height:100%;
   width:100%; // Assuming you have already set 100% height and width to body and html
}
.d-row{
   display : table-row;
}
.d-cell{
   display : table-cell;
}
.first{
   width : 50%;
}
.second{
   width : 50%;
}

在这里演示http://jsbin.com/osutos/1/edit

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

4 个答案: