21

我正在使用这样的布局开发一个 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>

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

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

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

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

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

4

9 回答 9

23

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

这篇文章尤其应该可以帮助你。

于 2008-09-17T13:40:23.410 回答
2

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

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

于 2008-09-19T10:07:49.957 回答
1

到目前为止，我发现做 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>
于 2008-09-18T07:49:35.693 回答
1

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

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

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

于 2008-09-18T12:56:20.060 回答
1

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

于 2008-09-19T10:19:28.353 回答
0

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

于 2008-09-17T13:37:13.980 回答
0

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

使用此3 列布局生成器进行尝试。

于 2009-02-25T06:18:18.890 回答
0

这段代码在我的电脑上运行 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>
于 2011-02-13T20:48:47.430 回答
-1

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

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

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

于 2008-09-17T13:38:27.190 回答