Layout 使用<；部门>；标签？_Layout_Html_Css

Layout 使用<；部门>；标签？

layout html css

Layout 使用<；部门>；标签？,layout,html,css,Layout,Html,Css,我正在开发一个三栏网站，布局如下： <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 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”属性是“static”，我的

的

按预期一个接一个地显示出来

因此，我将CSS属性“position”设置为“relative”，并将“middle”和“right”的“top”属性更改为-（减去）前面

的高度。它工作得很好，但这种方法给我带来了两个问题：

1）即使InternetExplorer7正确地显示了三列，它仍然保持垂直滚动条，就好像

的

被放置在另一列的下方，并且在内容结束后有很多空白。我想要这个

2）这些元素的高度是可变的，因此我不知道为每个

的“top”属性设置哪个值；我不想硬编码

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

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

首先，相对定位与您描述的一样：它在原始位置保留空间，但显示一定数量的DIV偏移

如果浮动div，则它们将从左向右堆叠，但这可能会导致问题

使用CSS的三列布局相当困难。如果您尚未签出，请查看[

，因为它包含一些优秀的教程和网站设计指南

尤其应该帮助你。

到目前为止，我发现做3列（或以奇怪的方式在可用空间上拆分任何其他数量的列）最简单的方法是。有一种方法可以为你提供基本布局。下面将为你提供一个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>

1
3.
4.
5 YUI基本页
6.
7.
8.
9
10 YUI:CSS网格生成器
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29英尺在这里。
30
31
32

有许多示例和库，您可以在上面搜索-已经列出了一些示例和库（必须阅读单独的列表）

我在最近几个网站上使用过，非常喜欢。雅虎完全支持它，而且它理解和使用起来很快。这里就是，它允许你将你的页面格式化为你想要的任意多的列和部分

YUI很好，因为你不必为你的站点建立新的轮子，而且他们做了所有的工作来确保他们的基础工作在所有的浏览器上。而且最好的是，它是免费的。

尝试一下。开始时很简单，但是对于大多数应用程序来说是足够强大的。

易于理解的教程和示例。有一个排版库，可以直接生成良好的结果。

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

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

使用此代码进行尝试。

此代码在我的计算机上与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>


试验
第2栏

回答得好。过去几天我一直在玩弄YUI builder，我不得不说它能够创建2列或3列布局，但要做好准备，从我所能告诉你的情况来看，要获得正确的布局，他们的CSS要么全是，要么什么都不是，在某些情况下，它们会抹掉你的CSS