簡單的HTML UI箱

我遇到一些麻煩一些基本的HTML/CSS，並想知道我做錯了，或者如果有一個更聰明的方式來做事？簡單的HTML UI箱

基本上，我想創建一個簡單的用戶界面，並創造了這一點，但它似乎不工作很正確。 Box4或6似乎是行爲不端，當我調整瀏覽器窗口：

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

編輯 - 添加屏幕抓取的我看到了什麼調整瀏覽器窗口時。 Attached Image

任何幫助請傢伙，大加讚賞。

凶多吉少。

來源

2016-04-14 slash85

試試這個

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>

來源

2016-04-14 18:36:10

調整了這一點，沒有意識到你可以做0.5％等 - 認爲它是我將得到的最好的。我自己和我的強迫症感謝你。 – slash85

好像是沒事在這裏工作。也許你可以更清楚地瞭解這個問題？

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>

來源

2016-04-14 18:09:04 gibberish

當我調整瀏覽器窗口boxes4和6似乎失去同步。它們不能在其餘的用戶界面中正確放置。 – slash85

你檢查的高度％的總和？看起來盒子2的高度爲56％，但盒子3和盒子4的總高度爲55％（包括1％的邊際）。

來源

2016-04-14 18:43:05 Chezz

簡單的HTML UI箱

回答

相關問題