Html 使用 <DIV> 标签实现 3 列网站的最佳方式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/83279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to implement a 3-column website using <DIV> tags?
提问by E.Z.
I'm developing a 3-column website using a layout like this:
我正在使用这样的布局开发一个 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>
But, considering the default CSS 'position' property of <DIV>'sis 'static', my <DIV>'swere shown one below the other, as expected.
但是，考虑到默认的 CSS 'position' 属性<DIV>'s是 'static' <DIV>'s，正如预期的那样，我的显示是一个在另一个下面。
So I set the CSS property 'position' to 'relative', and changed the 'top' property of the 'middle' and 'right' <DIV>'sto -(minus) the height of the preceding <DIV>. It worked fine, but this approach brought me two problems:
因此，我将 CSS 属性“position”设置为“relative”，并将“middle”和“right”的“top”属性更改<DIV>'s为 -（减去）前一个<DIV>. 它工作得很好，但这种方法给我带来了两个问题：
1) Even though Internet Explorer 7 shows three columns properly, it still keeps the vertical scrollbar as if the <DIV>'swere positioned one below the other, and there is a lot of white space after the content is over. I would'n like to have that.
1）即使Internet Explorer 7正确显示了三列，它仍然保持垂直滚动条，好像一个<DIV>'s位于另一个之下，并且内容结束后有很多空白。我不想要那个。
2) The height of these elements is variable, so I don't really know which value to set for each <DIV>'s 'top' property; and I wouldn't like to hardcode it.
2）这些元素的高度是可变的，所以我真的不知道为每个<DIV>'top'属性设置哪个值；我不想硬编码它。
So my question is, what would be the best (simple + elegant) way to implement this layout? I would like to avoid absolute positioning , and I also to keep my design tableless.
所以我的问题是，实现这种布局的最佳（简单+优雅）方式是什么？我想避免绝对定位，并且我也希望我的设计没有表格。
回答by Josh
If you haven't already checked out A List Apartyou should, as it contains some excellent tutorials and guidelines for website design.
如果您还没有查看A List Apart，您应该查看一下，因为它包含一些优秀的网站设计教程和指南。
This articlein particular should help you out.
这篇文章特别应该帮助你。
回答by Mats Wiklander
Give BluePrint CSSa try. It is really simple to get started with, yet powerful enough for most applications.
给蓝图的CSS一试。它上手非常简单，但对于大多数应用程序来说足够强大。
Easy to understand tutorials and examples. Has a typography library that produces decent results straight out of the box.
易于理解的教程和示例。有一个排版库，可以直接产生不错的结果。
回答by sdfx
I like 960 Grid System. It's a lightweight, easy to use css which devides the screen into 12 (or 16) columns. You can use it for a 3 column design and align the rest of your content accordingly.
我喜欢960 网格系统。这是一个轻量级、易于使用的 css，它将屏幕分为 12（或 16）列。您可以将其用于 3 列设计，并相应地对齐其余内容。
回答by Peter Kelley
By far the easiest way that I have found to do 3 columns (or any other number of columns split over the available space in weird ways) is YUI Grids. There is a YUI Grids Builderto give you the basic layout. The following will give you a 750px wide basic 3 column layout (split 1/3 1/3 1/3) with a 160px left sidebar. Changing it to to other widths, sidebar configs and column splits is really easy.
到目前为止，我发现做 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>
回答by Baer
There are a number of examples and libraries out there you can search on - a couple already listed (A List Apart is a must read).
有许多示例和库可供您搜索——其中一些已经列出（A List Apart 是必读的）。
I've used the Yahoo User Interface Library (YUI)on my last couple of sites and really like it. Yahoo completely supports it and it's quick to understand and use. Here is there CSS for Grids, which allows you to format your page into as many columns and sections as you want.
我在最近的几个网站上使用了Yahoo 用户界面库 (YUI)并且非常喜欢它。雅虎完全支持它，而且理解和使用起来很快。这是Grids 的 CSS，它允许您将页面格式化为任意数量的列和部分。
YUI is nice because you don't have to reinvent the wheel for the foundation of your site, and they do all the work of making sure their foundations work across all browsers. And best of all, it's free.
YUI 很好，因为您不必为网站的基础重新发明轮子，而且他们会完成所有工作以确保其基础在所有浏览器上都能正常工作。最重要的是，它是免费的。
回答by Joshua
Try floating the div's to the left, that will keep them all on the same line - assuming there is enough spacing.
尝试将 div 向左浮动，这将使它们保持在同一行上 - 假设有足够的间距。
回答by unigogo
For fixed coloumn, just set height:xxxpx will make them equal.
对于固定列，只需设置 height:xxxpx 将使它们相等。
Use this 3 column layout generatorto try.
尝试使用这个3 列布局生成器。
回答by Nqko
This code work on my computer with IE 8, Chrome, Firefox.
这段代码在我的电脑上使用 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>
回答by Anthony Williams
Firstly, relative positioning does what you've described: it reserves space in the original location but displays the DIV offset by some amount.
首先，相对定位执行您所描述的操作：它在原始位置保留空间，但会显示一定量的 DIV 偏移量。
If you float the DIVs then they will stack left-to-right, but this can cause problems.
如果您浮动 DIV，则它们将从左到右堆叠，但这可能会导致问题。
A three-column layout using CSS is quite hard. Have a look at [http://www.glish.com/css/7.asp]
使用 CSS 的三列布局非常困难。看看 [ http://www.glish.com/css/7.asp]
