由CSS+div来替代表格的布局

Kiyo • 2008年01月1日 00:08 • HTML/CSS/特效 • 34 阅读

1.CSS布局常用的方法：
float : none | left | right 取值：
none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边

它是怎样工作的，看个一行两列的例子

xhtml:

以下是引用片段：
<div id="warp">
  <div id="column1">这里是第一列</div>
  <div id="column2">这里是第二列</div>
  <div class="clear"></div>/*这是违背web标准意图的，只是想说明在它下面的元素需要清除浮动*/
</div>

CSS:

以下是引用片段：
#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}

position : static | absolute | fixed | relative取值：
static : 默认值。无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

它来实现一行两列的例子

xhtml:

以下是引用片段：
<div id="warp">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
</div>

CSS:

以下是引用片段：
#wrap{ position:relative;/*相对定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}

他们的区别在哪?

显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

2.CSS常用布局实例

一列
单行一列

以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; }

两行一列

以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; }
#content-end {margin-left:auto; margin-right:auto; width: 400px; }

三行一列

以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; }

两列

单行两列

以下是引用片段：
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 420px;}

两行两列

以下是引用片段：
#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 420px;}

三行两列

以下是引用片段：
#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 420px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; }

三列

单行三列

绝对定位

以下是引用片段：
#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 0px 190px 0px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位
xhtml:

以下是引用片段：
<div id="warp">
  <div id="column">
  <div id="column1">这里是第一列</div>
  <div id="column2">这里是第二列</div>
  <div class="clear"></div>/*用法web标准不建议，但是记住下面元素需要清除浮动*/
  </div>
  <div id="column3">这里是第三列</div>
  <div class="clear"></div>/*用法web标准不建议，但是记住下面元素需要清除浮动*/
</div>

CSS:

以下是引用片段：
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

float定位二
xhtml

以下是引用片段：
  <div id="center" class="column">
    <h1>This is the main content.</h1>
  </div>
  <div id="left" class="column">
    <h2>This is the left sidebar.</h2>
  </div>
  <div id="right" class="column">
    <h2>This is the right sidebar.</h2>
  </div>

CSS

以下是引用片段：
body {
  margin: 0;
  padding-left: 200px; /* LC fullwidth */
  padding-right: 190px; /* RC fullwidth + CC padding */
  min-width: 200px; /* LC fullwidth + CC padding */
  }

.column {
  position: relative;
  float: left;
  }

#center {
width: 100%;
}

#left {
  width: 200px; /* LC width */
  right: 200px; /* LC fullwidth */
  margin-left: -100%;
  }

#right {
  width: 190px; /* RC width */
  margin-right: -100%;
  }

  /*** IE Fix ***/
* html #left {
  left: 190px; /* RC fullwidth */
  }

以下是引用片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

两行三列

xhtml:

以下是引用片段：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>The Holy Grail of Layouts: Example #4: A List Apart</title>
  <style type="text/css">

/*** The Essential Code ***/

    body {
      margin: 0;
      padding-left: 200px; /* LC fullwidth */
      padding-right: 190px; /* RC fullwidth + CC padding */
      min-width: 200px; /* LC fullwidth + CC padding */
    }

    #header, #footer {
      margin-left: -200px; /* LC fullwidth */
      margin-right: -190px; /* RC fullwidth + CC padding */
    }

    .column {
      position: relative;
      float: left;
    }

    #center {
      width: 100%;
    }

    #left {
      width: 200px; /* LC width */
      right: 200px; /* LC fullwidth */
      margin-left: -100%;
    }

    #right {
      width: 190px; /* RC width */
      margin-right: -100%;
    }

    #footer {
      clear: both;
    }

    /*** IE Fix ***/
    * html #left {
      left: 190px; /* RC fullwidth */
    }
    /*** Just for Looks ***/

    body {
      background: #FFF;
    }

    #header, #footer {
      font-size: large;
      text-align: center;
      padding: 0.3em 0;
      background: #999;
    }

    #left {
      background: #66F;
    }

    #center {
      background: #DDD;
    }

    #right {
      background: #F66;
    }

    .column {
      padding-top: 1em;
      text-align: justify;
    }

</style>
</head>

<body>

<div id="header">This is the header.</div>

  <div id="center" class="column">
    <h1>This is the main content.</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
  </div>

    <h2>This is the left sidebar.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
  </div>

  <div id="right" class="column">
    <h2>This is the right sidebar.</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>

</div>

<div id="footer">This is the footer.</div>

</body>

</html>

以下是引用片段：
<div id="header">这里是顶行</div>
<div id="warp">
  <div id="column">
  <div id="column1">这里是第一列</div>
  <div id="column2">这里是第二列</div>
  <div class="clear"></div>
  </div>
  <div id="column3">这里是第三列</div>
  <div class="clear"></div>
</div>

CSS:

以下是引用片段：
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

三行三列

xhtml:

CSS:

PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，我都没有设置margin,padding,boeder等属性，是因为我个人觉得，含有宽度定位的时候，最好不好用到他们，除非必不得已，因为如果不是这样的话，解决浏览器兼容问题，会让你头疼，而且产生一系列CSS代码，我觉得这样的效率和效果都不好！

3.CSS布局高级技巧
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin

IE中有浮动对象的双倍距离之BUG（IE Doubled Float-Margin Bug ）, 这里还需要具体问题具体解决，下面是解决办法
http://www.forest53.com/tutorials/tutorials_show.asp?id=31很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！

解决的方法是hack

以下是引用片段：
div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}

div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}

具体解释点击下面链接查看

http://www.blueidea.com/tech/site/2006/3170.asp列等高技巧

n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加JS脚本的
方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。
背景图填充法：
xhtml:
http://www.jluvip.com/blog/article.asp?id=114

以下是引用片段：
<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>

css:

以下是引用片段：
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉

JS脚本法：

http://www.blueidea.com/bbs/NewsDetail.asp?id=2453983代码的原理基本就是这样，读取高度，判断高度，高度相等

容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法

这篇文章说的很详细了

http://www.blueidea.com/tech/web/2006/3210.asp

版权声明：
作者：Kiyo
链接：https://www.wkiyo.cn/html/2008-01/i500.html
来源：Kiyo's space
文章版权归作者所有，未经允许请勿转载。

THE END

二维码

XHTML+CSS兼容性解决方案小集

< <上一篇

利用HttpRequest登录到某个网站，然后获取网站信息的程序示例

下一篇>>

搜索内容

由CSS+div来替代表格的布局

共有 0 条评论

恶灵鸡汤

标签云