html

Question

içinde divs tam ekranlı 2x2 ızgara oluşturma 2x2 pozisyonunda 4 div oluşturulmuş bir ızgara yapmaya çalışıyorum. Bu div Arasında Ben ikonların bu gibi bakarak, 1 piksel genişliğinde bir sınır istiyorum:

1|2 
-+- 
3|4 

div'ler kendi boyutlarda eşit olması gerekir ve toplamda herhangi çözünürlükte tam ekran olması gerekir. İlk fikrim, satırlar için 2 div ve sütunlar için her div (div) 2 div (sol). Şimdiye kadar satırlarda mükemmel bir şekilde çalışıyor, ancak div'ler arasındaki sınırı eklediğimde bir kaydırma çubuğu çıkıyor. Açıkça sınır genişliğe dahil değildir:% 50. Bunu nasıl elde edebilirim?

Bu benim kodum şu ana kadar.

Ben de bir keman demo kod çalışması yapmaya çalıştı

<div class="row border" style="background-color: red;"> 

    </div> 
    <div class="row" style="background-color: blue"> 

    </div> 

CSS

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

      .row 
      { 
       Width: 100%; 
       Height: 50%; 
      } 

      .border 
      { 
       border-bottom: 1px solid black; 
      } 

HTML: DEMO ama nedense yüksekliği: beden ve/veya html won% 100 Çalışıyorum

Answer 1

Böyle bir şeye ihtiyacınız var mı? Ben ... tam sıfırdan yaptık

Demo

Burada yapıyorum, her 50% geniş sola süzülüyor 4 div elemanlara sahip olan ve sınırları kesmeyin, böylece box-sizing özelliği kullanmış div hizalaması. Bunlar div elemanları width içinde 50% ve böylece sınırlar ve dolgu genişlikleri bir elementin genişliği dahil edildiğinden emin sen border-box ayarlayabilirsiniz güzel css özelliği box-sizing yoktur 50%

<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

Kontrol Bu keman:

height yerine 2X2 ızgara Bunu istemezsin var min-height

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

ait kullandı.

Sadece% ve kenar%% 'inizin% 100'e eklenmesini sağlamalısınız. Daha küçük kenar boşlukları için ondalık kullanabilirsiniz.

Ör. http://jsfiddle.net/N6JuV/8/

Answer 3

height içindedir . Bu sayede, div s ürününüze ihtiyaç duyduğunuz kadar fazla dolgu ekleyerek çok genişler.

Ayrıca aslında ayrı div s içerdeki iki sıra sarmak gerekmez - Eğer belirtirseniz bir div% 50 genişliğinde olması gerektiğini, tam iki üst üste eğer float onları left sığmaktadır.

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

anladığım kadarıyla, kendi kutuları arasında onları istiyorum ve dokunmadan değil çünkü http://jsfiddle.net/RBWXe/

sınırlar, biraz zor olduğunu görün ekranın kenarları. Bu, her kutunun hangi taraflarının bir kenarının olması gerektiğini belirtmenizi gerektirir.

Ayrıca, daha sonra ızgaradaki kutu sayısını değiştirmenize izin veren bunu yapan bir meraklısı yolu, kenarlık renginiz olan body öğesi için background-color kullanmak ve kutuları yalnızca yarım piksel olarak kullanmaktır. aralarında 1 px boşluğunu barındırmak için% 50'den daha dar (calc işlevini kullanarak). Bkz İşte

Answer 4

http://jsfiddle.net/yhRBy/2/ benim çözüm

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

Ve CSS burada

.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 olduğunu http://jsbin.com/osutos/1/edit