Question

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

我正在寻找一个很好的例子，说明如何将标题设置为100％，然后将中间列作为一个大约700px宽的主体，每侧有一列。

更新：

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

我很想知道（使用FB作为例子）..他们如何能够拥有那些水平背景，然后让他们的内容排成三列，或者排在中间。

Answer 1

首先定义一个包装类，它是您希望页面的宽度。将其边距设置为auto（至少在左侧和右侧），以使其在页面中居中。你说700px，所以：

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

现在你需要三列，一列在中间，一列在每一侧。假设左侧和右侧的大小不同（只是为了清楚），请执行以下操作：

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

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

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

现在添加100％宽度标题：

#header
{
    width: 100%;
}

您可以像这样设置您的页面：

<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>

以下是每个div上具有任意背景颜色的示例，因此您可以看到它们的位置：

http://jsfiddle.net/grwjy/

这只是一个简单的例子，但希望能让你走上正轨。

Answer 2

这是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;
}

像FB和类似网站的CSS和页面布局

2 个答案: