精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>html/xhtml教程>正文

解决列高度自适应(相同)的五种方法


来源: 时间:07-02-27 点击: 点击这里收藏本文
4.采用负的外边界和内补丁相结合

不需要事先知道哪列的高度。

hacks比较多(主要是opera的),但容易使用,推荐:

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

5.采用负的左右边界和相对定位

下面的例子能较好地解决列高度相同的问题。

三行二列布局,主要内容在左边,网页宽度750px,左列580px,右列170px。

CSS代码:

#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}

xhtml代码:

<div id="middle">
<div id="sideright">
<div id="sideleft">
</div>
</div>
</div>

从结构看,middle(使用的是左列希望的背景色)在最外面,宽度等于sideleft的宽度,往里一层是sideright,其宽度为170px,浮动方向是右边。但其右面的边界是负的170px,相当于将sideright拉向右面(右面紧贴着middle的右边)170px的位置。而sideleft又是套在sideright里面的,其内容先于sideright出来,左边界是负的580,相当于在sideright左边580px,此时sideleft和middle位置重合。

优点:不需要背景图片,无hacks,完全的自适应高度。

缺点:现在的代码只能左对齐。

演示:

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

9 7 3 1 2 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.