-3

任何人都知道如何使用 css+html 定义类似于 FB 的布局的好教程？

我正在寻找一个很好的例子，说明如何拥有一个 100% 的标题，然后是一个中间列作为一个大约 700 像素宽的主体，每侧有一列。

更新：

我不是想用 div 理解 CSS 布局。只是想看看是否有一种方法或常见的方法来做到这一点

我很想知道（以FB为例）..他们如何能够拥有这些水平背景，然后将其内容排列成三列或排列在中间。

4

2 回答 2

2

First define a wrapper class that is the width you want your page to be. Set it's margin to auto (at least on the left and right) so it will be centered in the page. You said 700px, so:

.wrapper
{
    width: 700px;
    margin: auto;
}

Now you need your three columns, one in the middle and one on each side. Assuming that the left and right side are not the same size (just to make things clear), do something like this:

#left
{
    width: 100px;
    float: left;
}

#middle
{
    width: 400px;
    float: left;
}

#right
{
    width: 200px;
    float: left;
}

Now add the 100% width header:

#header
{
    width: 100%;
}

And you can setup your page like so:

<div id="header">
    <div class="wrapper">
         Your header here
    </div>
</div>
<div class="wrapper">
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

Here is this example with arbitrary background colors on each div, so you can see where they are:

http://jsfiddle.net/grwjy/

This is just a simple example but hopefully will get you on the right track.

于 2012-04-17T18:50:56.393 回答
1

这是HTML：

<html>
<head>
<link rel="styleSheet" href="style.css" type="text/css">
</head>
<body>
    <div id="header">Hello</div>
    <div id="sidebar">Sidebar</div>
    <div id="content">Content</div>
    <div id="sidebar-right">Right</div>
</body>
</html>

这是CSS：

body, html{
    width:      100%;
    height:     100%;
    margin:     0;
    padding:    0;
}

#header{
    width:      100%;
padding-left:   200px;
    height:     50px;
    background: #0000FF;
}

#sidebar{
    float:      left;
    width:      200px;
    height:     100%;
    background: #FF0000;
}

#content{
    float:      left;
    width:      700px;
    height:     100%;
    background: #00FF00;
}

#sidebar-right{
    margin-left:900px;
    height:     100%;
    background: #FFFF00;
}
于 2012-04-17T18:53:20.703 回答