使用 <DIV> 标签实现 3 栏网站的最佳方法?[关闭]
题
我正在开发一个 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
是“静态”的,我的 <DIV>'s
正如预期的那样,一个一个地显示在另一个之下。
所以我将CSS属性'position'设置为'relative',并更改了'middle'和'right'的'top'属性 <DIV>'s
到 -(减去)前一个的高度 <DIV>
. 。它工作得很好,但这种方法给我带来了两个问题:
1)即使Internet Explorer 7正确显示三列,它仍然保持垂直滚动条,就好像 <DIV>'s
内容一层一层地放置,内容结束后有很多空白。我不想有那个。
2)这些元素的高度是可变的,所以我真的不知道为每个元素设置哪个值 <DIV>
的“顶级”属性;我不想对其进行硬编码。
所以我的问题是,实现这种布局的最佳(简单+优雅)方法是什么?我想避免绝对定位,并且我也希望我的设计保持不变。
其他提示
给 蓝图CSS 尝试一下。它上手非常简单,但功能强大,足以满足大多数应用程序的需要。
易于理解的教程和示例。拥有一个排版库,可以直接产生不错的结果。
到目前为止,我发现做 3 列(或以奇怪的方式在可用空间上分割任何其他数量的列)的最简单方法是 YUI 网格. 。有一个 YUI 网格生成器 为您提供基本布局。下面将为您提供一个 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>
您可以搜索许多示例和库 - 其中一些已经列出(A List Apart 是必读)。
我用过 雅虎用户界面库 (YUI) 在我的最后几个网站上并且非常喜欢它。雅虎完全支持它,并且可以快速理解和使用。这里就是那里 网格 CSS, ,它允许您将页面格式设置为所需数量的列和部分。
YUI 很好,因为您不必为站点的基础重新发明轮子,并且它们会完成所有工作以确保其基础在所有浏览器上运行。最重要的是,它是免费的。
我喜欢 960网格系统. 。它是一个轻量级、易于使用的 css,它将屏幕分为 12(或 16)列。您可以将其用于 3 栏设计,并相应地调整其余内容。
尝试将 div 浮动到左侧,这将使它们全部位于同一行 - 假设有足够的间距。
对于固定列,只需设置 height:xxxpx 即可使它们相等。
用这个 3 列布局生成器 去尝试。
这段代码可以在我的电脑上使用 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>
首先,相对定位执行您所描述的操作:它在原始位置保留空间,但显示 DIV 偏移量。
如果浮动 DIV,那么它们将从左到右堆叠,但这可能会导致问题。
使用 CSS 的三列布局相当困难。看一下 [http://www.glish.com/css/7.asp]