Erstellen eines 2x2 Raster mit divs Vollbild in HTML

Question

Ich versuche, ein Raster von 4 Divs in einer 2x2 Position gebildet. Zwischen diesen divs möchte ich eine Grenze mit einer Breite von 1 Pixel, basicly wie folgt aussehen:

1|2 
-+- 
3|4 

Die divs in ihrer Größe gleich sein müssen und insgesamt müssen sie mit jeder Auflösung in vollem Umfang nutzen zu können. Meine erste Idee ist es, 2 divs für die Zeilen zu machen, und in jedem div 2 divs für die Spalten, links schwebend. Bis jetzt funktioniere ich die Zeilen perfekt, aber sobald ich die Grenze zwischen den divs hinzufüge, erscheint eine Bildlaufleiste. Klar ist die Grenze nicht in der Breite enthalten: 50%. Wie kann ich das schaffen?

Dies ist mein Code so weit.

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> 

Ich habe auch versucht, den Code der Arbeit in einer Geige Demo zu machen: DEMO aber aus irgendeinem Grund die Höhe: 100% auf Körper und/oder HTML-won arbeite nicht.

Answer 1

Brauchen Sie so etwas? Ich habe es von kompletten Kratzern ...

Demo

Was hier zu tun mit 4 div Elementen links geschwommen ist, die jeweils 50% breit und box-sizing Eigenschaft verwendet hat, so dass die Grenzen nicht unterbrechen die div Ausrichtung. Diese div Elemente sind 50% in width und sind 50% in 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; 
} 

Answer 2

prüfen diese Geige:

height statt min-height

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

verwendet das sind Sie 2X2 Gitter das wollen.

Sie müssen nur sicherstellen, dass Ihre Breite% und Marge% zu 100% hinzufügen soll. Sie können sogar Dezimal für kleinere Ränder verwenden.

Eg. http://jsfiddle.net/N6JuV/8/

Answer 3

Es gibt eine schöne CSS-Eigenschaft box-sizing, die Sie border-box so einstellen können, dass die Breiten der Grenzen und Polsterung sind enthalten in der Breite eines Elements . Auf diese Weise können Sie auch so viel Polsterung hinzufügen, wie Sie für Ihre div s benötigen, ohne sich Sorgen zu machen, dass sie zu breit werden.

Sie brauchen auch nicht wirklich Ihre zwei Reihen innerhalb separaten div s wickeln - wenn Sie festlegen, dass ein div 50% breit sein sollte, genau zwei in einer Reihe passen, wenn Sie float sie 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; 
} 

Siehe http://jsfiddle.net/RBWXe/

Die Grenzen ein bisschen schwierig sind, weil wie ich sie verstehe, können Sie sie zwischen Ihren Boxen in möchten, und berühren nicht die Ränder des Bildschirms. Dazu müssen Sie genau angeben, welche Seiten jeder Box einen Rahmen haben sollen.

Eine schlauere Methode, dies zu tun, die auch die Anzahl der Felder in Ihrem Raster später ändern könnte, verwenden Sie eine background-color für das Element body, die Ihre Grenze Farbe ist, und haben die Boxen nur ein halbes Pixel schmaler als 50% (unter Verwendung der calc-Funktion), um den 1px-Platz dazwischen unterzubringen. Siehe http://jsfiddle.net/yhRBy/2/

Answer 4

Hier ist meine Lösung

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

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

Demo hier http://jsbin.com/osutos/1/edit