シンプルなHTML UIボックス

Question

いくつかの基本的なHTML/CSSに何か問題があります。私が間違っていることを知りたいのですか、スマートなやり方があるのか​​を知りたいですか？

私は基本的に単純なUIを作成したいと思っていますが、これを作成しましたが、うまく動作しないようです。ブラウザウィンドウのサイズを変更する際、私が見るものの追加画面のグラブ -

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

編集：Box4または6は、私は、ブラウザのウィンドウのサイズを変更する際に不正な動作をしているようです。 Attached Image

大変ありがとうございます。

スラッシュ。

Answer 1

この

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

ここで問題なく動作しているようです。おそらく、あなたはその問題についてより明確になるだろうか？

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

あなたは、高さ％の総和を確認しましたか？試してみてくださいボックス2の高さは56％ですが、ボックス3とボックス4の合計は55％です（1％のマージンを含む）。