如何实现一个三栏布局，两侧固定宽度，中间自适应（圣杯布局/双飞翼布局）？请写出至少两种实现方式。

推荐答案

方式一：圣杯布局

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<style>
body {
    min-width: 600px; /* 防止页面过窄时布局错乱 */
}
.container {
    padding-left: 200px;
    padding-right: 150px;
}
.main {
    float: left;
    width: 100%;
}
.main-content {
    margin-left: 200px;
    margin-right: 150px;
    background-color: lightblue;
}
.left {
    float: left;
    width: 200px;
    margin-left: -100%;
    background-color: lightcoral;
    position: relative;
    left: -200px;
}
.right {
    float: left;
    width: 150px;
    margin-left: -150px;
    background-color: lightgreen;
    position: relative;
    right: -150px;
}
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
</style>
</head>
<body>
    <div class="container clearfix">
        <div class="main">
            <div class="main-content">
                中间自适应内容
            </div>
        </div>
        <div class="left">
           左侧固定宽度
        </div>
        <div class="right">
            右侧固定宽度
        </div>
    </div>
</body>
</html>

方式二：双飞翼布局

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>双飞翼布局</title>
    <style>
        body {
            min-width: 600px; /* 防止页面过窄时布局错乱 */
        }
        .container {
            width: 100%;
            float: left;
        }
        .main {
            float: left;
            width: 100%;
        }
        .main-content {
            margin-left: 200px;
            margin-right: 150px;
            background-color: lightblue;
        }
        .left {
            float: left;
            width: 200px;
            margin-left: -100%;
            background-color: lightcoral;
        }
        .right {
            float: left;
            width: 150px;
            margin-left: -150px;
            background-color: lightgreen;
        }
       .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="main">
            <div class="main-content">
                中间自适应内容
            </div>
        </div>
        <div class="left">
            左侧固定宽度
        </div>
        <div class="right">
            右侧固定宽度
        </div>
    </div>
</body>
</html>

本题详细解读

圣杯布局

1. 核心思想：使用 padding 和 margin 来实现两侧固定宽度，中间自适应的效果。
2. HTML结构：
   • 一个包裹容器 .container。
   • 三个子元素： .main （中间自适应内容）、 .left (左侧固定宽度)、 .right (右侧固定宽度)。 注意，这里的 HTML 结构，中间自适应内容必须在最前面，两侧的内容必须在中间内容之后。
3. CSS样式：
   • .container 设置左右 padding 值，留出左右侧边的空间，clearfix清除浮动。
   • .main 设置 float: left 和 width: 100%，使得宽度充满容器，并向左浮动。
   • .main-content 设置 margin-left 和 margin-right，留出左右侧边栏的空间，中间内容自适应。
   • .left 设置 float: left 和固定 width，同时设置 margin-left: -100%，将其移到左侧，通过 position: relative 和 left: -200px 定位到正确位置。
   • .right 设置 float: left 和固定 width，同时设置 margin-left为 -150px，将其移到右侧，通过 position: relative 和 right: -150px 定位到正确位置。
4. 优点：结构清晰，兼容性好。
5. 缺点：使用了 position: relative，稍微复杂。

双飞翼布局

1. 核心思想：通过 margin 来实现两侧固定宽度，中间自适应的效果。
2. HTML结构：
   • 一个包裹容器 .container。
   • 三个子元素： .main （中间自适应内容）、 .left (左侧固定宽度)、 .right (右侧固定宽度)。 注意，这里的 HTML 结构，中间自适应内容必须在最前面，两侧的内容必须在中间内容之后。
3. CSS样式：
   • .container 设置 width: 100% float:left，clearfix清除浮动。
   • .main 设置 float: left 和 width: 100%，使得宽度充满容器，并向左浮动。
   • .main-content 设置 margin-left 和 margin-right，留出左右侧边栏的空间，中间内容自适应。
   • .left 设置 float: left 和固定 width，同时设置 margin-left: -100%，将其移到左侧。
   • .right 设置 float: left 和固定 width，同时设置 margin-left为 -150px，将其移到右侧。
4. 优点：结构清晰，易于理解。
5. 缺点：需要额外的 div .main-content来撑开主内容区域。

这两种布局方式都能够实现三栏布局，两侧固定宽度，中间自适应的效果，开发者可以根据实际情况选择合适的布局方式。双飞翼的结构更加容易理解，代码更简洁。