如何实现一个三栏布局，两侧固定宽度，中间自适应（圣杯布局/双飞翼布局）？请写出至少两种实现方式。-JavaScript中文网-JavaScript教程资源分享门户

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

推荐答案

方式一：圣杯布局

-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
---- -
    ---------- ------ -- ----------- --
-
---------- -
    ------------- ------
    -------------- ------
-
----- -
    ------ -----
    ------ -----
-
------------- -
    ------------ ------
    ------------- ------
    ----------------- ----------
-
----- -
    ------ -----
    ------ ------
    ------------ ------
    ----------------- -----------
    --------- ---------
    ----- -------
-
------ -
    ------ -----
    ------ ------
    ------------ -------
    ----------------- -----------
    --------- ---------
    ------ -------
-
---------------- -
    -------- ---
    -------- ------
    ------ -----
-
--------
-------
------
    ---- ---------------- ----------
        ---- -------------
            ---- ---------------------
                -------
            ------
        ------
        ---- -------------
           ------
        ------
        ---- --------------
            ------
        ------
    ------
-------
-------

方式二：双飞翼布局

-- -------------------- ---- -------
--------- -----
------
------
    --------------------
    -------
        ---- -
            ---------- ------ -- ----------- --
        -
        ---------- -
            ------ -----
            ------ -----
        -
        ----- -
            ------ -----
            ------ -----
        -
        ------------- -
            ------------ ------
            ------------- ------
            ----------------- ----------
        -
        ----- -
            ------ -----
            ------ ------
            ------------ ------
            ----------------- -----------
        -
        ------ -
            ------ -----
            ------ ------
            ------------ -------
            ----------------- -----------
        -
       ---------------- -
            -------- ---
            -------- ------
            ------ -----
        -
    --------
-------
------
    ---- ---------------- ----------
        ---- -------------
            ---- ---------------------
                -------
            ------
        ------
        ---- -------------
            ------
        ------
        ---- --------------
            ------
        ------
    ------
-------
-------

本题详细解读

圣杯布局

核心思想：使用 padding 和 margin 来实现两侧固定宽度，中间自适应的效果。
HTML结构：
- 一个包裹容器 .container。
- 三个子元素： .main （中间自适应内容）、 .left (左侧固定宽度)、 .right (右侧固定宽度)。注意，这里的 HTML 结构，中间自适应内容必须在最前面，两侧的内容必须在中间内容之后。
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 定位到正确位置。
优点：结构清晰，兼容性好。
缺点：使用了 position: relative，稍微复杂。

双飞翼布局

核心思想：通过 margin 来实现两侧固定宽度，中间自适应的效果。
HTML结构：
- 一个包裹容器 .container。
- 三个子元素： .main （中间自适应内容）、 .left (左侧固定宽度)、 .right (右侧固定宽度)。注意，这里的 HTML 结构，中间自适应内容必须在最前面，两侧的内容必须在中间内容之后。
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，将其移到右侧。
优点：结构清晰，易于理解。
缺点：需要额外的 div .main-content来撑开主内容区域。

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

纠错
反馈