在html中制作一个带有div全屏的2x2网格

我尝试制作一个2×2位置形成4个div的网格。这些div之间，我想用1个像素的宽度的边框，basicly看起来像这样：在html中制作一个带有div全屏的2x2网格

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％没有工作。

来源

2013-07-29 Cornelis

你需要这样的东西吗？我从完全从头做起吧...

Demo

什么我这里做的是有向左浮动4个div元素，每个50%宽，已经使用box-sizing属性，以使边框不会中断div对齐。这些div元件在width50%并且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-29 10:27:16

这个你应该添加的jsfiddle的代码是实现它的完美方式。比我的好。请更新您的链接，它不起作用。 – aBhijit

@aBhijit哎呀，谢谢你的通知:)我忘了保存小提琴... –

谢谢！这工作。虽然我有一些问题需要解决，但我最终还是可以解决这些问题。似乎你真的要小心高低和身高：绝对。但最后，它一切都像我希望它的工作。谢谢！最后的结果和一些适应链接到我最终需要它的提琴手：http://jsfiddle.net/ZGMwG/1/ – Cornelis

检查此琴：

height用来代替min-height

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

那是2X2格你想要的。

你只需要确保你的widht％和margin％应该增加到100％。你甚至可以使用小数点来获得较小的利润。

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

来源

2013-07-29 10:23:12 aBhijit

，因为它现在下来相当多的时间，天 –

有一个很好的CSS属性box-sizing，可以设置为border-box使得边界和填充的宽度包括在元件的宽度 。这样，您可以根据自己的需要添加尽可能多的填充，而不必担心它们变得太宽。

也实际上并不需要包装内单独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/

边界是有点棘手，因为据我所知，您希望他们在您的箱子之间，并且不接触屏幕边缘。这要求您准确指定每个框的哪些边应具有边框。

这样做的一种很有意思的方式，它也允许你稍后改变网格中的盒子数量，对body元素使用background-color，这是你的边框颜色，并且盒子只有半个像素窄于50％（使用calc函数），以适应它们之间的1px空间。见http://jsfiddle.net/yhRBy/2/

来源

2013-07-29 10:36:09 Elise

这里是我的解决方案

<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-29 10:49:34 Exception

在html中制作一个带有div全屏的2x2网格

回答

相关问题