使用 <DIV> 标签实现 3 列网站的最佳方法？ [关闭]答案

【问题标题】：Best way to implement a 3-column website using <DIV> tags? [closed]使用 <DIV> 标签实现 3 列网站的最佳方法？ [关闭]
【发布时间】：2010-09-10 03:25:31
【问题描述】：

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

    <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>

但是，考虑到<DIV>'s 的默认 CSS 'position' 属性是'static'，我的<DIV>'s 按预期显示在另一个下方。

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

1) 即使 Internet Explorer 7 正确显示了三列，它仍然保持垂直滚动条，就好像 <DIV>'s 被定位在另一个之下一样，并且在内容结束后有很多空白区域。我想要那个。

2) 这些元素的高度是可变的，所以我真的不知道为每个<DIV> 的'top' 属性设置哪个值；而且我不想硬编码它。

所以我的问题是，实现此布局的最佳（简单 + 优雅）方式是什么？我想避免绝对定位，我也想保持我的设计无表格。

【问题讨论】：

标签： layout html css

【解决方案1】：

如果您还没有查看 A List Apart，您应该查看，因为它包含一些优秀的网站设计教程和指南。

This article 应该可以帮到你。

【讨论】：

【解决方案2】：

试试BluePrint CSS。它上手非常简单，但对于大多数应用程序来说足够强大。

易于理解的教程和示例。有一个排版库，可以直接产生不错的结果。

【讨论】：

【解决方案3】：

到目前为止，我发现做 3 列（或任何其他数量的列以奇怪的方式在可用空间上拆分）的最简单方法是 YUI Grids。有一个YUI Grids Builder 给你基本的布局。下面将为您提供一个 750 像素宽的基本 3 列布局（拆分 1/3 1/3 1/3），左侧边栏为 160 像素。将其更改为其他宽度、侧边栏配置和列拆分非常容易。

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

【讨论】：

好答案。过去几天我一直在玩 YUI 构建器，不得不说它能够创建 2 或 3 列布局，但要做好准备，据我所知，要获得正确的布局，要么全有，要么全无关于他们的 CSS，在某些情况下会消灭你的 CSS

【解决方案4】：

有许多示例和库可供您搜索 - 一些已经列出（A List Apart 是必读的）。

我在最近的几个网站上使用了Yahoo User Interface Library (YUI)，非常喜欢它。雅虎完全支持它，而且它易于理解和使用。这是CSS for Grids，它允许您将页面格式化为任意数量的列和部分。

YUI 很好，因为您不必为网站的基础重新发明轮子，而且他们会做所有工作来确保他们的基础适用于所有浏览器。最重要的是，它是免费的。

【讨论】：

【解决方案5】：

我喜欢960 Grid System。这是一个轻量级、易于使用的 css，将屏幕分成 12（或 16）列。您可以将其用于 3 列设计并相应地对齐其余内容。

【讨论】：

【解决方案6】：

尝试将 div 向左浮动，这将使它们保持在同一行 - 假设有足够的间距。

【讨论】：

【解决方案7】：

对于固定列，只需设置 height:xxxpx 将使它们相等。

使用这个3 column layout generator 试试。

【讨论】：

【解决方案8】：

这段代码在我的电脑上运行 IE 8、Chrome、Firefox。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

【讨论】：

【解决方案9】：

首先，相对定位做了您所描述的：它在原始位置保留空间，但显示 DIV 偏移量。

如果您浮动 DIV，那么它们将从左到右堆叠，但这可能会导致问题。

使用 CSS 的三列布局非常困难。看看[http://www.glish.com/css/7.asp]

【讨论】：