使用< DIV>实现3栏网站的最佳方法标签？ [英] Best way to implement a 3-column website using <DIV> tags?

问题描述

我正在使用这样的布局开发一个3列网站：

I'm developing a 3-column website using a layout like this:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

$ b < c

所以我将CSS属性的position设置为relative，并改变了'middle'和'right'的'top'属性< DIV> s 到 - （减去）前面的< DIV> 的高度。它工作正常，但这种方法带来了两个问题：

So I set the CSS property 'position' to 'relative', and changed the 'top' property of the 'middle' and 'right' <DIV>'s to -(minus) the height of the preceding <DIV>. It worked fine, but this approach brought me two problems:

1）即使Internet Explorer 7正确显示三列，它仍然保持垂直滚动条，如果< DIV>的被放置在另一个下面，并且在内容结束之后存在大量空白空间。我不想这样。

1) Even though Internet Explorer 7 shows three columns properly, it still keeps the vertical scrollbar as if the <DIV>'s were positioned one below the other, and there is a lot of white space after the content is over. I would'n like to have that.

2）这些元素的高度是可变的，所以我不知道为每个<$ c设置哪个值$ c>< DIV> '''top'property;我不想硬编码。

2) The height of these elements is variable, so I don't really know which value to set for each <DIV>'s 'top' property; and I wouldn't like to hardcode it.

所以我的问题是，什么是最好的（简单+优雅）的方式来实现这个布局？

So my question is, what would be the best (simple + elegant) way to implement this layout? I would like to avoid absolute positioning , and I also to keep my design tableless.

推荐答案

如果您还没有登出 A List Apart ，因为它包含一些关于网站设计的优秀教程和指南。

If you haven't already checked out A List Apart you should, as it contains some excellent tutorials and guidelines for website design.

这篇文章特别应该可以帮助你。

This article in particular should help you out.

这篇关于使用&lt; DIV&gt;实现3栏网站的最佳方法标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！