Question

我正在使用这样的布局开发一个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'属性更改为 - （减去）前一个{{ 1}}。它工作得很好，但这种方法给我带来了两个问题：

1）即使Internet Explorer 7正确地显示了三列，它仍然保持垂直滚动条，好像<DIV>一个位于另一个之下，并且在内容结束后有很多空格。我想要那个。

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

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

Answer 1

如果您还没有签出A List Apart，那么它应该包含一些优秀的网站设计教程和指南。

This article尤其应该帮助你。

Answer 2

尝试BluePrint CSS。开始使用非常简单，但对于大多数应用程序来说足够强大。

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

Answer 3

到目前为止，我发现做3列的最简单方法（或以奇怪的方式在可用空间上分割的任何其他数量的列）是YUI Grids。有一个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>

Answer 4

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

我在最后几个网站上使用了Yahoo User Interface Library (YUI)并且非常喜欢它。雅虎完全支持它，它很快就能理解和使用。这里有CSS for Grids，可让您根据需要将页面格式化为多个列和部分。

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

Answer 5

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

Answer 6

尝试将div放在左侧，这将使它们全部保持在同一条线上 - 假设有足够的间距。

Answer 7

对于固定的coloumn，只需设置高度：xxxpx将使它们相等。

使用此3 column layout generator尝试。

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

Answer 9

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

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

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

使用<div>标签实现3列网站的最佳方式？</div>

9 个答案: