DIV+CSS

左右两列自适应高度及三列等高的方法

作者:NetFox 日期:2013-07-03

字体大小: 小中大

我们在用DIV+CSS布局网页的时候，必然会遇到左右两列自适应高度的问题，就是左边列的背景会随着右边列内容的增加也相应的增加高度，下面就教大家DIV+CSS左右两列自适应高度的方法。
第一种方法：

HTML代码

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

说明：其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点：一是在最外层加上overflow:hidden，然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。

以上是左列自动适应右列
要使右列适应左列方法同上

第二种方法：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列高度自适应</title>
<style type="text/css">

</style>
</head>
<body>

我在左边<br />
我在左边<br />

我在左边<br />
</div>

</div>

</div>
</body>
</html>

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

这种方法可以实现左右二列自动适应

三列等高：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
*{
 margin:0;
 padding:0;
}
#wrap{
 overflow:hidden;
 width:1000px;
 margin:0 auto;
}
#left,#center,#right{
 margin-bottom:-10000px;
 padding-bottom:10000px;
}
#left{
 float:left;
 width:250px;
 background:#00FFFF;
 }
#center{
 float:left;
 width:500px;
 background:#FF0000;
 }
#right{
	float:left;
	width:250px;
	background:#00FF00;
 }
</style>
</head>
<body>
<div id="wrap">
 <div id="left">
  <p>left</p>
  
 </div>
 <div id="center">
  <p>center</p>
  
 </div>
 <div id="right">
  <p>right</p>
  <p>right</p>
  <p>right</p>
 </div>
</div>
</body>
</html>

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

[本日志由 NetFox 于 2013-07-03 11:42 PM 更新]

上一篇: SQL中 and or优先级问题

下一篇: Apple Mobile Device(Recovery Mode)驱动安装解决方案

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags:

相关日志:

评论: 0 | 引用: 0 | 查看次数: -

发表评论

昵　称:	记住我的信息.
密　码:	游客发言不需要密码.
邮　箱:	邮件地址支持Gravatar头像,邮箱地址不会公开.
网　址:	输入网址便于回访.
内　容:	正在加载编辑器...
验证码:	点击获取验证码
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号. 字数限制 1000 字 \| UBB代码开启 \| [img]标签关闭