Question

我知道以前曾经问过，但我很好奇看事情是否有所改变。

我正在寻找一个html / css修复3列布局，主要内容（中间）区域位于DOM中的第一个（3列） - 用于搜索引擎优化。

有什么想法吗？

Answer 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

Answer 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; }

固定3列网站

2 个答案: