CSS网页布局入门教程7：二列固定宽度居中

下面我就为你详细讲解一下“CSS网页布局入门教程7：二列固定宽度居中”的完整攻略。

标题

介绍

本教程将会讲解如何使用 CSS 实现二列固定宽度居中布局。

示例说明

我们来通过两个示例来说明此布局。

示例1

首先，HTML 代码如下：

<div class="container">
    <div class="left">
        <h3>左侧栏</h3>
        <p>这是左侧栏的内容</p>
    </div>
    <div class="right">
        <h3>右侧栏</h3>
        <p>这是右侧栏的内容</p>
    </div>
</div>

其中，.container 是容器的样式类，.left 和 .right 分别是左侧栏和右侧栏的样式类。

接下来，我们来实现样式：

.container {
    width: 800px;
    margin: 0 auto;
}

.left {
    float: left;
    width: 200px;
    background-color: #ccc;
}

.right {
    float: right;
    width: 600px;
    background-color: #eee;
}

在上面的代码中，.container 的样式设置了宽度为 800px，并使用 margin: 0 auto; 让容器水平居中。.left 使用了 float: left; 让左侧栏向左浮动，设置了宽度为 200px，背景颜色为 #ccc，.right 使用了 float: right; 让右侧栏向右浮动，设置了宽度为 600px，背景颜色为 #eee。

示例2

HTML 代码如下：

<div class="container">
    <div class="left">
        <h3>左侧栏</h3>
        <p>这里是左侧栏的内容</p>
    </div>
    <div class="right">
        <h3>右侧栏</h3>
        <p>这里是右侧栏的内容</p>
    </div>
    <div class="clear"></div>
</div>

其中，.clear 是清除浮动的样式类。

接下来，我们来实现样式：

.container {
    width: 800px;
    margin: 0 auto;
}

.left {
    float: left;
    width: 200px;
    background-color: #ccc;
}

.right {
    margin-left: 220px;
    background-color: #eee;
}

.clear {
    clear: both;
}

在上面的代码中，.container 的样式设置了宽度为 800px，并使用 margin: 0 auto; 让容器水平居中。.left 使用了 float: left; 让左侧栏向左浮动，设置了宽度为 200px，背景颜色为 #ccc。.right 没有使用浮动，而是使用了 margin-left: 220px; 让右侧栏距离左侧栏 20px，并设置了背景颜色为 #eee，最后使用了 .clear 清除浮动。