在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網格

回答

相關問題