65.9K
CodeProject 正在变化。 阅读更多。
Home

无需表格的网页布局

JNygren
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.84/5 (30投票s)

2011年3月18日

CPOL

5分钟阅读

viewsIcon

97907

downloadIcon

1571

本文将向您展示如何无需使用表格来布局您的网页。它演示了如何使用层叠样式表 (CSS) 和 <div> 元素，将您想要的内容放置在网页上您想要的位置。

引言

"来吧，这不可能这么难！"

我是一名 ASP.NET 新手开发者。我也相当固执。我希望以我的方式做事！所以，当我想要将某个元素定位到我网站某个区块的右下角时，我决定不使用表格。您是否曾查看过一个网页的源代码，里面充满了表格嵌套表格，嵌套表格，嵌套表格，嵌套表格！我当时想：“一定有更好的方法。”

本文将向您展示如何无需使用表格来布局您的网页。它演示了如何使用层叠样式表 (CSS) 和 <div> 元素，将您想要的内容放置在网页上您想要的位置。

背景

我在 CodeProject.com 上找到了一篇题为“DIV TABLE”的精彩文章，作者是 Pranay Rana。这听起来正是我想要的。它让我离目标近了很多。然而，它通过填满其左侧的空间来将“某个东西”放置在右侧。要将某个东西放在底部，需要填满其上方的空间。我在前面说过我想以我的方式做事。但这还不是。我想将某个元素独立于页面上的任何其他元素，定位在右下角。

作为一名 ASP.NET 学生，我想在这个项目上练习我新获得的技能，所以最初是用 ASP.NET 完成的。但这里没有任何需要服务器端代码的地方。这纯粹是您的浏览器渲染的 HTML。因此，我将以纯 HTML 的形式呈现本文，无需 ASP.NET。如果您想在您的 ASP.NET 项目中使用此技术，将其移植过去应该没有任何问题。

我在互联网上到处搜索，希望能找到一些简单的说明来告诉我如何做到我想要的。我什么也没找到！（因此，有了这篇文章。）从 Pranay 的文章中，我知道我需要做一些关于“position”属性的工作。我找到的文档说明：“绝对定位的元素是相对于第一个位置不为 static 的父元素来定位的。”我理解“不为 static”的意思，并且我对“相对于……父元素”的绝对定位是可以接受的。但“第一个”是什么意思？是从您 HTML 文件顶部开始遇到的第一个吗？（这包括通过层叠样式表设置样式的父元素。）我发现它指的是从要定位的元素向上追溯嵌套层级，找到第一个满足条件的“父元素”。（第一个“啊哈！”）

我认为定位是用“笛卡尔坐标”来思考的。（X 向右增加。Y 向下或向上增加，取决于上下文。）屏幕位置就是这样指定的。在窗口中定位元素也是这样，(x, y) 是距离左上角的距离。这适用于“left”和“top”样式元素。但是使用“right”和“bottom”时，情况会很快变得复杂。由于我试图将某个元素定位在右下角，我感到非常困惑（而且极其沮丧！）。最后，我发现这些定位属性是相对于父元素的相应边缘测量的！（第二个“啊哈！”）有了这个发现，一切都迎刃而解了。

在我尝试样式表中的各种方法时，我遇到了一些看似很简单但就是不起作用的东西！“该死的代码！该死的 CSS！！！为什么这不管用？！”结果发现是开发者（我）的愚蠢。如果您在输入样式规则时忘记了一个分号，它们就不会生效，而且您不会收到任何错误消息来告诉您原因！（第三个“啊哈！”）

Using the Code

本文的 HTML 只是一堆嵌套的 <div> 元素和一些用于演示的纯文本。有关使用层叠样式表而不是表格来布局您的网站的优缺点，请参阅文章“DIV TABLE”。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Web Page Layout Without Tables</title>
    <meta name="author" content="Jeff Nygren" />
    <meta name="description" content="Demonstration of Tableless Web Page Layout" />
    <link href="TablelessLayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div class="divWholeScreen" align="center">
      <div class="divPageBox">
         <div class="divTitle"><h1>Tableless Layout</h1></div>
         <div class="divOuterUpperLeft">
            <div class="divInnerLL"></div>
         </div>
         <div class="divOuterUpperRight">
            <div class="divInnerUL"></div>
         </div>
         <div class="divOuterLowerLeft">
            <div class="divInnerLR"></div>
         </div>
         <div class="divOuterLowerRight">
            <div class="divInnerUR"></div>
         </div>
         <div class="divContent">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum.<br />
            <br /><br />
            <div class="divMyGoal">
                This was my goal!!
            </div>
         </div>
      </div>
   </div>
</body>
</html>

样式表几乎都是针对 HTML 代码中 <div> 元素的样式。.divPageBox 类 <div> 只是一个容器，包含了网页上的所有内容。注意到 position:relative; 属性了吗？这使得这个 <div> 元素成为所有包含元素“第一个位置不为 static 的父元素”。任何具有 position:absolute; 的元素都“脱离了”HTML 内容的流。‘top’、‘left’、‘bottom’ 和 ‘right’ 属性定义了元素相对于父元素的位置。‘.divOuter...’ 类用于在页面上定位较大的彩色框。

Tableless Layout Screenshot

/* TablelessLayout.css */
/* Author: Jeff Nygren */

body
{
   background-color:#EEFFCC;
}

.divWholeScreen
{
   margin:0px;
}

.divPageBox
{
   position:relative;
   width:800px;
   min-height:350px;
   text-align:left;
   border:solid 1px Black;
   background-color:#EEEEEE;
}

.divTitle
{
   width:400px;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
}

.divOuterUpperLeft
{
   position:absolute;
   top:20px;
   left:20px;
   width:150px;
   height:150px;
   background-color:Yellow;
}

.divOuterUpperRight
{
   position:absolute;
   top:20px;
   right:20px;
   width:150px;
   height:150px;
   background-color:Blue;
}

.divOuterLowerLeft
{
   position:absolute;
   bottom:20px;
   left:20px;
   width:150px;
   height:150px;
   background-color:Lime;
}

.divOuterLowerRight
{
   position:absolute;
   bottom:20px;
   right:20px;
   width:150px;
   height:150px;
   background-color:Red;
}

.divInnerUL
{
   position:absolute;
   top:10px;
   left:10px;
   width:60px;
   height:60px;
   background-color:Maroon;
}

.divInnerUR
{
   position:absolute;
   top:10px;
   right:10px;
   width:60px;
   height:60px;
   background-color:Green;
}

.divInnerLL
{
   position:absolute;
   bottom:10px;
   left:10px;
   width:60px;
   height:60px;
   background-color:Navy;
}

.divInnerLR
{
   position:absolute;
   bottom:10px;
   right:10px;
   width:60px;
   height:60px;
   background-color:Olive;
}

.divContent
{
   position:relative;
   margin-left:200px;
   padding:15px;
   margin-bottom:20px;
   width:370px;
   background-color:White;
   font-size:larger;
}

.divMyGoal
{
   position:absolute;
   bottom:0px;
   right:0px;
   padding:6pt;
   color:#FFF000;
   background-color:#000040;
   font-size:larger;
   font-weight:bold;
}

小框相对于大框进行定位。position:absolute; 属性使得大框成为小框“第一个位置不为 static 的父元素”。“Absolute”不是“static”。

关注点

还有一点我想请您注意。我假设您现在已经下载了示例代码并在浏览器中查看了 TablelessLayout.html。编辑此文件并将其中的“占位符文本”数量加倍。这将导致 .divPageBox 框扩展以包含额外的内容。请注意，页面底部的两个框相对于包含框的底部边缘保持了它们的位置！最后，正如您从标有“这就是我的目标”的框中可以看到的，我已经实现了我的目标，即在不使用表格的情况下将某个元素定位在一个区块的右下角。我以“我的方式”做到了。

如果您是经验丰富的网页开发者，我确信您会认为这很简单。但经过两天的搜索，对我来说它确实一点也不简单。我写这篇文章是希望能够为他人节省一些我曾经历过的痛苦。

结论

感谢您阅读我的文章。我希望您觉得它很有用。如果您比我更有经验，或者知道有更好的方法来做我在这篇文章中提到的任何事情，我非常愿意接受您提出的任何建设性意见。我一直在努力学习新东西。

© . All rights reserved.