使用<DIV>标签实现三栏式网站的最佳方法？
我正在使用以下布局开发一个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>的默认CSS'position'属性为'static'，我的<DIV>的显示就比预期的要低。
因此，我将CSS属性" position"设置为" relative"，并将" middle"和" right"<DIV>'s的" top"属性更改为-(减去)前面<DIV >`。效果很好，但是这种方法给我带来了两个问题：
1)即使Internet Explorer 7正确显示了三列，它仍然保持垂直滚动条，就像将<DIV>放置在另一个之间一样，并且内容结束后还有很多空白。我想要那个。
2)这些元素的高度是可变的，所以我真的不知道为每个<DIV>的'top'属性设置哪个值；而且我不想对其进行硬编码。
所以我的问题是，实现这种布局的最佳方式(简单+优雅)是什么？我想避免绝对定位，并且还要使我的设计保持不变。
解决方案
回答
尝试将div浮动到左侧，假设有足够的间距，这会使它们全部保持在同一行上。
回答
首先，相对定位可以完成我们所描述的：它在原始位置保留了空间，但显示了DIV偏移量。
如果浮动DIV，则它们会从左到右堆叠，但这会引起问题。
使用CSS的三列布局非常困难。看看[http://www.glish.com/css/7.asp]
回答
如果我们尚未签出A List Apart，则应该这样做，因为它包含一些出色的网站设计教程和指南。
特别是这篇文章应该对我们有所帮助。
回答
到目前为止，我发现做3列(或者以奇怪的方式在可用空间上划分的任何其他数量的列)的最简单方法是YUI网格。有一个YUI Grids Builder可以为我们提供基本布局。以下内容将为我们提供750px宽的基本3列布局(拆分1/3 1/3 1/3)，左侧边栏为160px。将其更改为其他宽度，侧边栏配置和列拆分确实非常容易。
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>
回答
那里有许多示例和库，我们可以在已经列出的一对数据库中进行搜索(必须阅读" A List Apart")。
我在最近的两个站点上都使用过Yahoo用户界面库(YUI)，非常喜欢它。雅虎完全支持它，并且可以快速理解和使用。这里有CSS for Grids，它允许我们将页面格式化为所需的任意列和节。
YUI很不错，因为我们不必为网站的基础重新设计轮子，并且它们会做所有工作来确保其基础在所有浏览器中都能正常工作。最重要的是，它是免费的。
回答
尝试一下BluePrint CSS。入门非常简单，但对于大多数应用程序来说足够强大。
易于理解的教程和示例。拥有一个排版库，可以直接产生出不错的结果。
回答
我喜欢960网格系统。这是一个轻巧易用的CSS，可将屏幕分为12(或者16)列。我们可以将其用于3列设计，并相应地对齐其余内容。
回答
对于固定的列，只需将height：xxxpx设置为相等即可。
使用此3列布局生成器进行尝试。
