简单！！太适合我们这些刚接触css的了！在这篇东西里，我们可以知道怎样设置使无序列表水平排列，而不是平常的垂直排列；还可以知道怎样使两个<div></div>并排显示！
原文地址：
在这里！！
简单的两列布局（CSS）
这是一篇用CSS制作一个两列布局的教程。布局是这样的，有一个标题栏、一个水平导航栏、一个底部,水平居中于浏览器，简单而好看。
1、主要构造
首先，我们写下主要的HTML构造
<div id="wrap">
<div id="header"></div>
<div id="nav"></div>
<div id="main></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
然后，我们加一些内容到不同的部分!
<div id="wrap">
<div id="header"><h1>Document Heading</h1></div>
<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
…
</ul>
</div>
<div id="main">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit…</p>
</div>
<div id="sidebar">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit…</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
…
</ul>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
现在我们就得到了一个完整的未经修饰的XHTML文档了，下面让我们用CSS稍稍修饰一下它的布局。
2、调整<body>
为了让整个页面充满整个浏览器，我们把<body>的margin和padding属性设置为0,同时我们也可以指定文本和背景颜色。
body{
margin:0;
padding:0;
background-color:#A7A09A;
color:#000;
}
3、on to the main containers
接下来，设置主要内容区#wrap的width和margin使它置中，同时可以设置它的背景颜色，使它显现出来！
The method we use to center the content is based on the fact that when an element’s left and right margins are set to auto, they will share whatever is left when the element’s width has been subtracted from that of its container. In this case the width of #wrap will be subtracted from the width of the browser window. To avoid problems that can occur in some browsers when the window is narrower than #wrap We set the <body> element’s min-width to the same value as the width of #wrap.(未翻译出来，要努力了！)
body {
margin:0;
padding:0;
background-color:#A7A09A;
color:#000;
min-width:750px;
}
div#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
然后给各个区域设置不同的颜色使它们显现出来。
#header {
background-color:#ddd;
}
#nav{
background-color:#c99;
}
#main {
background-color:#9c9;
{
#sidebar }
background-color:#c9c;
{
#footer {
background-color:#cc9;
}
4、使列并排显示
为使两列能并排显示我们需要用到float和margin。同时要合理设置每列的宽！！
#main {
background-color:#9c9;
float:left;
width:500px;
}
#sidebar {
background-color:#c9c;
width:247px;
margin-left:500px;
}
#wrap < #sidebar {
width:250px;
}
注意：为解决IE/WIN的bug（three-pixel-margin），先把#sidebar的宽设置为247px，然后用子选择（IE/WIN不支持子选择）再设置#sidebar的width为247px。
这时#sidebar就会出现在#main的右边了，但#footer却不在它应该的位置上。
5、让#footer位于底部
The footer doesn’t get pushed down to the bottom of the content because of the way float works. When you float an element, it is removed from the document flow, which makes elements that appear further down in the XHTML code end up where they would have been if the floated element wasn’t there at all. In this case #footer will disregard #main and start right below #sidebar.
To avoid this we use the clear property to tell the footer that it can’t have any elements next to it.(未翻译出来，要努力了！！)
#footer{
background-color:#cc9;
clear:both;
}
6、背景颜色
现在，我们可以看到较短的一列，它的颜色没有一直延伸到底部，这样显得不够美观。为了使它的颜色延伸至底部，我们可以设置#sidebar和#wrap使用同一种颜色！
#sidebar{
background-color:#99c;
width:247px;
margin-left:500px;
}
7、使导航条水平放置
#nav包含了一个正规的无序列表显示的链接，我们可以改变它的显示方式，使它水平显示。
#nav ul{
margin:0;
padding:0;
}
#nav li{
display:inline;
list-style:none;
margin:0;
padding:0;
}
8、调整margin
最后，我们调整margin和padding然布局更加紧凑。
#header h1 {
padding:5px;
margin:0;
}
#nav {
background-color:#c99;
padding:5px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar ul{
margin-bottom:0;
}
#sidebar h3, #sidebar p{
padding:0 10px;
}
#footer p{
padding:5px;
margin:0;
}
搞定！！我们可以从这个简单的布局扩展成我们需要的更加复杂的、漂亮的布局
大家转载请留个链接https://bingu.net