Basit HTML Kullanıcı Arabirimi kutuları

Question

Bazı temel HTML/CSS'lerle ilgili bir sorun yaşıyorum ve neyi yanlış yaptığımı bilmek mi istiyorsunuz yoksa bir şeyler yapmak için daha akıllıca bir yol var mı?

Temel olarak basit bir kullanıcı arayüzü oluşturmak istiyorum ve bunu oluşturdum ama oldukça doğru çalışmıyor gibi görünmüyor. - ilave ekran kapmak tarayıcı penceresini yeniden boyutlandırma gördüğüm değerlerle ait

<style type="text/css"> 
    .box1 
    { 
     width:100%; 
     height:25%; 
     background-color:#eee; 
    } 
    .box2 
    { 
     width:60%; 
     height:56%; 
     background-color:#eee; 
     float:left; 
     margin-top:1%; 
    } 
    .box3 
    { 
     width:39%; 
     height:40%; 
     background-color:#eee; 
     margin-left:61%; 
     margin-top:1%; 

    } 
    .box4 
    { 

     width:39%; 
     height:14%; 
     background-color:#eee; 
     margin-left:61%; 
     margin-top:1%; 

    } 
    .box5 
    { 
     width:50%; 
     height:14%; 
     background-color:#eee; 
     float:left; 
     margin-top:1%; 
    } 
    .box6 
    { 
     width:49%; 
     height:14%; 
     background-color:#eee; 
     margin-left:51%; 
     margin-top:1%; 

    } 


    html,body{ 
     height:100%; 
     //width:100%; 
    } 
    </style> 


    <div class="box1"> 
     box1 
    </div> 
    <div class="box2"> 
     box2 
    </div> 
    <div class="box3"> 
     box3 
    </div> 
    <div class="box4"> 
     box4 
    </div> 
    <div class="box5"> 
     box5 
    </div> 
    <div class="box6"> 
     box6 
    </div> 

Düzenlendi: Box4 veya 6 Ben tarayıcı penceresini yeniden boyutlandırmak zaman misbehaving görünmektedir. Attached Image

Herhangi bir yardım lütfen, çok teşekkür ederiz.

Slash.

Answer 1

bu

html,body{height:100%;} 
 
.box1{width:100%;height:25%;background-color:#eee;} 
 
.box2{width:60%;height:56%;background-color:#eee;} 
 
.box3{width:39%;height:40%;background-color:#eee;} 
 
.box4{width:39%;height:15.5%;background-color:#eee;} 
 
.box5{width:50%;height:14%;background-color:#eee;} 
 
.box6{width:49%;height:14%;background-color:#eee;} 
 
body > div { 
 
    float: left; 
 
    vertical-align: top; 
 
    margin: 3px 0 0 3px; 
 
}

<div class="box1"> 
 
    box1 
 
</div> 
 
<div class="box2"> 
 
    box2 
 
</div> 
 
<div class="box3"> 
 
    box3 
 
</div> 
 
<div class="box4"> 
 
    box4 
 
</div> 
 
<div class="box5"> 
 
    box5 
 
</div> 
 
<div class="box6"> 
 
    box6 
 
</div>

Answer 2

Burada iyi çalışıyor gibi görünüyor. Belki sorun hakkında daha net olabilirdin?

html,body{height:100%;/*width:100%;*/} 
 
.box1{width:100%;height:25%;background-color:#eee;} 
 
.box2{width:60%;height:56%;background-color:#eee;float:left;margin-top:1%;} 
 
.box3{width:39%;height:40%;background-color:#eee;margin-left:61%;margin-top:1%;} 
 
.box4{width:39%;height:14%;background-color:#eee;margin-left:61%;margin-top:1%;} 
 
.box5{width:50%;height:14%;background-color:#eee;float:left;margin-top:1%;} 
 
.box6{width:49%;height:14%;background-color:#eee;margin-left:51%;margin-top:1%;}

<div class="box1"> 
 
    box1 
 
</div> 
 
<div class="box2"> 
 
    box2 
 
</div> 
 
<div class="box3"> 
 
    box3 
 
</div> 
 
<div class="box4"> 
 
    box4 
 
</div> 
 
<div class="box5"> 
 
    box5 
 
</div> 
 
<div class="box6"> 
 
    box6 
 
</div>

Answer 3

Eğer yükseklik% toplamını kontrol ettiniz deneyin? Kutu 2'nin% 56 yüksekliğe sahip olduğu, ancak kutu 3 ve kutu 4'ün toplamda% 55 olduğu görülmektedir (% 1'lik marj dahil).