HTML5 CSS調整版面問題

我想設計一個佈局，看起來是這樣的： HTML5 CSS調整版面問題

我想整個佈局使用百分比，而不是像素來設計。我認爲我相當接近，但我遇到了利潤問題或其他問題。這裏是我當前的代碼：

CSS

html, body { 
    width: 95%; 
    margin: 0 auto; 
    height: 100%; 
} 

#header { 
     margin: 0; 
     background-color: #000000; 
     height: 5%; 
     width: 100%; 
} 
#wrapper { 
    height: 95%; 
    margin: 0; 
} 

#content { 
    width: 100%; 
    overflow: hidden; 
    height: 95%; 
    margin: 0; 
} 

#left { 
    margin: 0; 
    width: 25%; 
    height: 500px; 
    float: left; 
} 

#right { 
    float: left; 
    width: 75%; 
    height: 100%; 
    margin-right: 0%; 
    display: inline; 
} 

.boxes { 
    margin: .5%; 
    width: 48%; 
    height: 48%; 
} 

#topleft { 
    float: left; 
} 

#topright { 
    float: left; 
    display: inline; 
} 

#bottomleft { 
    float: left; 
} 

#bottomright { 
    float: left; 
    display: inline; 
}

HTML

<html> 
    <body>  
     <div id="header"> 

    </div> 
    <div id="wrapper"> 
     <div id="content"> 
       <div id="left"> 
       </div> 
       <div id="right"> 
        <div class="boxes" id="topleft"></div> 
        <div class="boxes" id="topright"></div> 

        <div class="boxes" id="bottomleft"></div> 
        <div class="boxes" id="bottomright"></div> 
       </div> 
     </div> 
    </div>     
    </body> 
</html>

還有什麼我需要添加到我的CSS和HTML或代碼來獲得我尋找的佈局？任何幫助將不勝感激。

來源

2014-10-17 user3781214

它怎麼樣？ – j08691 2014-10-17 15:44:18

右側子div的右邊距關閉，底部子div的下邊距與頂部不一樣。此外，由於某種原因，左上角和右側div上方有一個頂部邊緣，我無法擺脫。我想直接在標題下的左側和右側的div。 – user3781214 2014-10-17 15:47:46

我想現在是正確的，看看。我回來了，右邊的寬度爲75％，74％是錯的。但我使用css3的box-sizing: border-box使寬度包括#left和.box的邊框。另外，我設置框的寬度以49％從而完成連同保證金的1.5％所需的大小：如果是我

CSS

html, body { 
    width: 95%; 
    margin: 0 auto; 
    height: 100%; 
    border: 1px solid; 
} 

#header { 
     margin: 0; 
     #background-color: #000000; 
     height: 5%; 
     width: 100%; 
     border: 1px solid; 

} 
#wrapper { 
    height: 95%; 
    margin: 0; 
} 

#content { 
    width: 100%; 
    #overflow: hidden; 
    height: 95%; 
    margin: 0; 
    padding: 0px; 
} 

#left { 
    box-sizing: border-box; 
    margin: 0; 
    width: 25%; 
    height: 500px; 
    float: left; 
    border: 1px solid; 
    padding: 0px; 
} 

#right { 

    float: left; 
    width: 75%; 
    height: 100%; 
    margin-right: 0px; 
    display: inline; 
    padding: 0px; 
} 

.boxes { 
    box-sizing: border-box; 
    margin: .5%; 
    width: 49%; 
    height: 49%; 
    border:1px solid; 
} 

#topleft { 

    float: left; 
} 

#topright { 
    float: left; 
    display: inline; 
} 

#bottomleft { 
    float: left; 
} 

#bottomright { 
    float: left; 
    display: inline; 
}

來源

2014-10-17 16:08:07

是的，非常接近！唯一的另一件事是我想要四個盒子div來佔用頭部的剩餘寬度 - 左div（右div的左右邊距應該相等，這樣子div看起來居中）。 – user3781214 2014-10-17 16:16:24

我編輯瞭解決方案，看它是否達到目標。 – 2014-10-17 16:59:35

是的，謝謝你的幫助。 – user3781214 2014-10-20 13:40:04

，我'把它變成一個網格系統，並讓它們嵌套。

喜歡的東西：

<header class="section group"> 
    <div class="col span_1_of_1">Header (this HTML is rather redundant)</div> 
</header> 
<section class="section group"> 
    <aside class="col span_1_of_10">Left</aside> 
    <main class="col span_9_of_10"> 
     <section class="section group"> 
      <div class="col span_1_of_2">Top Left</div> 
      <div class="col span_1_of_2">Top Right</div> 
     </section> 
     <section class="section group"> 
      <div class="col span_1_of_2">Top Left</div> 
      <div class="col span_1_of_2">Top Right</div> 
     </section> 
    </main> 
</section>

的CSS的基礎上的百分比，其中百分比的利潤。

Check it out

來源

2015-02-10 11:29:37 Quin

HTML5 CSS調整版面問題

回答

相關問題