6

我尝试在 2x2 位置制作一个由 4 个 div 组成的网格。在这些 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，但由于某种原因 height: 100% on body 和/或 html 不起作用。

4

4 回答 4

8

你需要这样的东西吗？我已经从头开始了...

演示

这里所做的是让 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;
}
于 2013-07-29T10:27:16.973 回答
4

box-sizing您可以设置一个不错的 css 属性，border-box以便边框和填充的宽度包含在元素的宽度中。这样，您还可以根据需要向divs 添加尽可能多的填充，而不必担心它们变得太宽。

您实际上也不需要将两行包装在单独div的 s 中——如果您指定 adiv应该是 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/

边框有点棘手，因为据我了解，您希望它们位于框之间，而不是触摸屏幕边缘。这需要您准确指定每个框的哪些边应该有边框。

这样做的一种更好的方法，也允许您稍后更改网格中的框数，是使用 abackground-color作为body边框颜色的元素，并使框仅比 50% 窄半个像素（使用函数），以容纳它们之间的calc1px 空间。见http://jsfiddle.net/yhRBy/2/

于 2013-07-29T10:36:09.030 回答
0

检查这个小提琴：

height用来代替min-height

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

这就是您想要的 2X2 网格。

您只需要确保您的宽度 % 和边距 % 应该增加到 100%。您甚至可以使用小数来获得较小的边距。

例如。http://jsfiddle.net/N6JuV/8/

于 2013-07-29T10:23:12.823 回答
0

这是我的解决方案 

<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

于 2013-07-29T10:49:34.357 回答