創建兩列布局-html/css semantics

我想創建一個非常簡單的液體佈局與2列 - 左邊的將有一個固定的寬度，而右邊的將依賴於窗口大小。創建兩列布局-html/css semantics

該佈局將包含4個元素 - 標題，導航，內容和頁腳。

根據這裏HTML5元素的語義，我有幾個問題。

這是代碼：

<body> 
    <div id="container"> 
     <header> 
      <div id="header"> 
      sadfsdf 
      </div> 
     </header> 
     <nav> 
      <div id="nav"> 
      gdfsgf 
      </div> 
     </nav> 
     <article> 
      <div id="article"> 
      gdffgdg 
      </div> 
     </article> 
     <footer> 
      <div id="footer"> 
      gdfsgf 
      </div> 
     </footer> 
    </div> 
</body>

1）是div容器真的necessery？我要做的就是： HTML已經字體/線高性身體有一定的利潤和背景圖像容器包含其餘

是否O.K.把身體的東西放在HTML裏面，讓身體成爲容器？

2）內部div的標題，導航，...必要？他們在那裏，因爲我可以改變填充，邊距和邊框而不改變元素的寬度。我是否應該在每次更改時都設置此寬度？

來源

2012-10-16 user1615069

1）如果需要div容器與否在很大程度上取決於你的實際設計，但是：

可以得到，只要您使用box-sizing: border-box;更多的是，這裏擺脫自己內心的DIV-S的從我所看到的內容來看，這並不是真的有必要。什麼是身體的東西？

2）你自己回答了你的問題。如果您想防止由於填充，邊距，邊框而導致溢出，請保留它。

來源

2012-10-16 12:24:18

如果達到最大寬度，Div＃容器僅用於在網站中間居中。這就是爲什麼我想讓身體做到這一點。這會影響到什麼嗎？（如果我將添加任何固定寬度）。並根據2）...這些內部div是否有任何語義HTML5元素？也許章節？或詠歎調角色？ – user1615069

居中您不需要容器。您可以將html的寬度設置爲100％，然後將主體的最大寬度設置爲任意，寬度爲100％並將主體居中。據我所知，HTML5中內部div沒有特殊的語義元素。 –

是的，你可以使用你的身體作爲你的容器。 http://css-tricks.com/box-sizing/

來源

2012-10-16 12:23:58 Caelea

使用盒大小，只有當你不需要支持IE 6和7 –

@SvenBieder你可以看到他已經使用了HTML 5級的標籤，誰不被舊的IE瀏覽器沒有插件支持。而對於IE 6和7，你總是可以使用谷歌瀏覽器框架 – Caelea

是的你是對的，沒有想過他使用HTML5左右。 –

具有在佈局2 /多列中的最好的方法是：

浮子第N-1列的
集餘量到另一個

HTML

<div id="left">LEFT</div> 
<div id="right">RIGHT</div>

CSS

div#left{ 
    float:left; 
    width:200px; 
    min-height: 400px; 
    background-color: magenta; 
} 
div#right{ 
    margin-left: 210px; 
    min-height: 400px; 
    background-color: yellow; 
}

看一看here

編輯：

體是高級別容器，其包含了所有的元件被傳遞給圖。有時我們需要在頁面中定位或形成我們的整個元素，而不必改變每個元素相對於彼此的位置。所以被稱爲容器的元素可能是有用的。

來源

2012-10-16 12:31:18

謝謝，但那不是我要求的。 – user1615069

有一兩件事你可以看看是一個使用腳手架。

http://twitter.github.com/bootstrap/scaffolding.html 這是來自流體佈局部分。雖然它不使用固定的跨度，但可以使用嵌套容器。

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span2"> 
     <!--Sidebar content--> 
    </div> 
    <div class="span10"> 
     <!--Body content--> 
    </div> 
    </div> 
</div>

來源

2012-10-16 12:55:47 zmanc

創建兩列布局-html/css semantics

回答

相關問題