HTML/CSS佈局詢價

Question

我想知道如何讓我的HTML/CSS按照這個特定的格式：

http://i.imgur.com/o5h1GFA.jpg

我已經嘗試搜索碼在線，但它不會工作對我來說，每當我測試它。

任何幫助將不勝感激！

問候

Answer 1

這是你的身體標記內基本HTML：

<div id="navbar"> 
</div> 
<div id="textbox"> 
</div> 
<div id="lmodule"> 
</div> 
<div id="rmodule"> 
</div> 

這是你在你的專用CSS文件CSS。

#navbar { 
width: 100%; 
height: auto; (or if you have specific height put it) 
(position: fixed; - use this if you want your menu to stay with the viewer upon moving up/down the page) 
} 
#textbox { 
width: 60%; (based on your image I believe it is around 60%) 
height: auto; 
position: relative; 
margin: 0 auto; 
} 
#lmodule { 
display: inline-box; 
width: 27%; 
height: auto; 
float: left; 
margin: 0 3% 0 auto; 
} 
#rmodule { 
display: inline-box; 
width: 27%; 
height: auto; 
float: right; 
margin: 0 auto 0 3%; 
} 

這至少是我該怎麼做的。我使用基於％的值，因爲通過這種方式進行媒體查詢很容易。