固定 3 列站点答案

【问题标题】：Fixed 3 Column Site固定 3 列站点
【发布时间】：2010-01-11 06:57:30
【问题描述】：

我知道以前有人问过这个问题，但我很想知道事情是否发生了变化。

我正在寻找一个 html/css 固定的 3 列布局，其中主要内容（中间）区域位于 DOM 中的第一个（3 列中）区域 - 用于 SEO。

有什么想法吗？

【问题讨论】：

【解决方案1】：

它需要一些额外的标记，但要让内容成为第一，你可以尝试这样的事情：

<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">I'm first</div>
        <div id="side_a">I'm second</div>
    </div>
    <div id="side_b">I'm third</div>
</div>

在 CSS 中：

#wrapper {
    width: 800px; /* Total width of all columns */
    margin: 0 auto;
}

#content-wrapper {
    float: left;
}

#content {
    width: 400px;
    float: right;
}

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

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

#wrapper 将列限制为 800px 的宽度并使页面居中。 #content 和 #side_a 列使用不同的浮点数以相反的顺序排列在 #content_wrapper 内。然后#side_b 与#content_wrapper 一起浮动。

可以在此处找到一个工作示例：

http://www.ulmanen.fi/stuff/columns.php

【讨论】：

一种方法是使用相对定位，我打算首先建议，但在我看来这是次优的。它的工作方式是你有内容，A和B用float: left彼此相邻浮动，内容和A有position: relative，内容有left: 200px和Aleft: -400px。它有效，但在我看来它不是很好。

【解决方案2】：

这与使用 Tatu 的方法相同，但具有：

标题
页脚
流体宽度而不是固定尺寸
具有全高背景颜色的列
额外的 div 来填充列中的内容

你可以在 jsfiddle 上测试一下：http://jsfiddle.net/BzaSL/

HTML：

<div id="header">First: Header</div>
<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">
            <div id="contentpad">
                <h2>Second: Content</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis dui, porta consectetur dictum id, rhoncus non turpis. Praesent vitae fermentum enim. Donec consequat accumsan nibh et tempor. Duis sem enim, interdum eget vestibulum vitae, semper ac arcu. Maecenas convallis imperdiet libero, bibendum vulputate nulla tempus in. Duis eu purus eget lectus tincidunt fermentum. Vestibulum sit amet nunc et metus auctor ullamcorper. Vestibulum ut dui purus, nec hendrerit orci. Aliquam erat volutpat. Praesent a nibh vitae enim fringilla aliquam.</p>
            </div>
        </div>
        <div id="leftcol">
          <div id="leftcolpad">
              Third: Left column
            </div>
        </div>
    </div>
    <div id="rightcol">
          <div id="rightcolpad">
              Fourth: Right column
          </div>
    </div>
</div>
<div id="footer">Fifth: Footer</div>

CSS：

/* wrapper has all three columns, it is 100% of page width.
 * background applies to the right column.*/
#wrapper { width: 100%; margin: 0 auto; background-color:#CCFFFF; }
/* clear floating elements before footer */
#wrapper:after { display: block; content: ""; clear: both; }
/* content-wrapper is left two columns; 80% of wrapper width.
 * background applies to left column */
#content-wrapper { float: left; width:80%; background-color:#FFFFCC; }
/* content is 75% of the content-wrapper width */
#content { width: 75%; float: right; background-color:#FFCCFF; }
/* leftcol is the other 25% of the content-wrapper width */
#leftcol { width: 25%; float: left; }
/* rightcol is 20% of thet wrapper width */
#rightcol { float: left; width: 20%; }
/* Adding padding or margin directly to the columns messes up the layout */
#contentpad, #leftcolpad, #rightcolpad, #footer, #header{ padding:1em; }
#footer{ background-color:#CCCCFF; }
#header{ background-color:#FFCCCC; }

【讨论】：