HTML / CSS布局查询

Question

我想知道如何让我的HTML / CSS遵循这种特定的格式：

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

我已经尝试在线搜索代码，但每当我测试它时它都不适用于我。

非常感谢任何帮助！

此致

Answer 1

这是body标签内的基本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%;
}

至少我是这样做的。我使用基于％的值，因为这样很容易进行媒体查询。