使用 <DIV> 标签实现 3 栏网站的最佳方法？[关闭]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

题

我正在开发一个 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]

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top