1

使 3 列固定宽度跨浏览器兼容、可访问、语义正确的布局的最佳方法是什么？

<div id="wrapper">
        <div id="header">
            This is the Header
        </div>
        <div id="top-nav">
            Top Navigation
        </div>
        <div id="leftcolumn">
            Left Column
        </div>
        <div id="content">
            content column
        </div>
        <div id="rightcolumn">
            Right Column
        </div>
        <div id="footer">
            This is the Footer
        </div>
    </div>




#wrapper {width:970px;margin:0 auto }
 #header {height:100px  }
 #top-nav {height:30px}
 #leftcolumn {  }
 #content {  }
 #rightcolumn {  }
 #footer {height:100px}

有了这个 XHTML 代码，应该编写什么 css 来制作这个 3 col 布局。

  • 跨浏览器兼容，包括 IE6（没有 CSS hack 或 IE 的额外条件 css）
  • 以 Px 为单位的宽度
  • 居中
  • 在 em 中调整字体大小
  • 列数可以扩展或移除 1-4,5 等
  • 启用 SEO
4

2 回答 2

1

嗯，这对于浮动和人造柱来说非常简单。

为什么在柱子周围有这么多容器？你只需要一个。要清除浮动，请执行

#container {
    width:960px; /* or 100%, or whatever. It needs to be set for it to work in IE tho */
    overflow:auto; /* hidden works too */
    background:url(./img/faux-columns.gif) repeat-y; /* google faux columns for A List Apart article */
}

对于列本身

#col1 { width:520px; float:left; margin-right:20px; }
#col2 { width:200px; float:left; margin-right:20px; }
#col3 { width:200px; float:left; }
于 2009-10-22T22:46:19.373 回答
0

使用 jQuery + 它的布局插件。保持完整的头发。

于 2009-10-22T16:56:31.883 回答