HTML/CSS：佈局問題

基本上我試圖創建一個簡單的網頁模板，其中將包含3行。第一個是包含兩列的標題，第二個是主體，最後是一個頁腳。HTML/CSS：佈局問題

壓縮編碼明智我做這種佈局

<div id="wrapper"> 
    <div id="header"> 
     <header> 
     </header> 
     <div id="col2> 
     </div> 
    </div> 
    <div="mainbody"></div> 
    <footer></footer>

基本上我現在有麻煩的是在關於第一行與兩列。基本上我有第一張照片和第二張照片上的一堆按鈕。理想情況下，我希望將標題的寬度設爲100％，使其適合屏幕，第一列的內容貼在左側，而右側的按鈕則貼在左側。兩者之間留有空白。所以內容堅持雙方可以這麼說。目前我在CSS上使用float:left作爲第一列，我一直在搞浮法/對齊/位置，但我似乎無法得到任何工作。

所以，任何意見，我會感激。

我還有一個關於頁腳的問題，基本上我不知道如何去做。所以只是問問是否可能，並指導在哪裏看。

所以對於頁腳我想知道它是否可能，如果在頁腳和瀏覽器之間有x軸有空白區域，它適合屏幕和身體會拉伸。因爲從現在起，我的身體只處於其內容的高度。所以基本上CSS的一般建議，以幫助實現風格，使其適合屏幕。

來源

2012-11-23 user1846550

也發佈css代碼，或者創建dabblet開始使用 –

可能是mystypo中的問題？ ''div =「mainbody」>' –

可以發佈你想要的結果和CSS的圖片你是怎麼嘗試的........ –

頭2列

<div id="header"> 
<div id="column1" style="float:left;">Image</div> 
<div id="column2" style="float:left;">Buttons</div> 
</div>

現在，添加所需的利潤率左到第二塔的div。它將在2列之間

來源

2012-11-23 05:47:55 Ajith

<div id="wrapper"> 
    <header> 
     <div id="column1" style="float:left;">Image</div> 
     <div id="column2" style="float:left;">Buttons</div> 
     </header> 

    <div class="mainbody"> 
    Content 
    </div> 

<footer></footer>

使用創造空間，這

來源

2012-11-23 06:26:35 akdesigner

它可以創建結構簡單如下（Here is DEMO）

HTML是

<div id="wrapper"> 
    <div id="header"> 
     <header><img src='http://www.topnews.in/files/facebook-yahoo.jpeg' height=200 /> 
     </header> 
     <div id="col2"><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br><input type=Button value ="button 1" /><br> 
     </div> 
    </div> 
    <div="mainbody">mainbody 
    </div> 
    <footer></footer> 
</div>

和CSS會be

#header{overflow:auto} 
header{float:left} 
#col2{float:right}

希望它能幫助你:)

來源

2012-11-23 06:45:16

感謝你的迴應，正如我試圖通過float：left /權利。你的演示向我展示了它在其他地方一定有什麼問題，原因是我使用的是display：box，它不起作用。所以一個簡單的改變顯示：塊使它的工作。 – user1846550

HTML/CSS：佈局問題

回答

相關問題