DIV CSS：网页一行两列背景自适应

站长资源 2024/11/23 佚名

2 0 1

网页布局中常有的一种情况就是网页主体部分分成一行两列；而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分；但这样的设计给布局提出了一个看似简单，而实现非常难的问题；那就是左右两列怎么样实现背景高度自适应，及左边内容高于右边时，右边背景色也要和左边一样；右边内容高于左边时，左边背景色也要和右边一样；
当年为了实现这个，我在网上查过无数的文章，都没有很好的解决方案；多数人用很大的负数实现，也有人用javascript实现；后来因为感觉这样实现不合理，所以我一直用表格来实现；因为这样最简单；但今天同事问起我这个问题，我中午仔细想了想；想出了一个解决办法，写出来和大家分享；
基本原则：
1、布局要合理，不能为了实现这样的效果而使html的代码变得臃肿；
2、CSS部分也要简单巧妙实现，不能为了这样的效果而写大量的代码；而主要的还是浏览器兼容方面要没有问题；
以下是我实现的代码，说明一下，这样的布局还不是很理想；但这已是我暂时能想到的最好解决办法了；
实现方法一：左边用边框，右边用背景色；
这个方法是左边用200PX的边框来实现一列的背景，再用这个标签的实际背景色来实现另一列的背景，这样左右永远都是一样高的；
程序代码
<div id="box">
<div id="right">right <br /> right</div>
<div id="left">left</div>
<div style="clear:both"></div>
</div>
程序代码
<style>
/*这一行可能不用看，是废话，为了好看一点*/
*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}
/*最外边的一个盒子，左边框200PX，有背景色*/
#box{ background:#FFCC00;width:700px; border-left:200px solid #FF9900;}
/*让左边的一列向左移动200PX*/
#left{margin-left:-200px; width:200px; position:static;}
/*由于IE和FIREFOX有区别，所以对IE加了一行作处理*/
* html #left{position:fixed;}
/*右边的宽度，这里我为什么没有写700PX；说实话，我实在没有想明白；这里最多只能写900-200-2=698PX；但这在使用过程中，并不会有影响；*/
#right{float:right; width:695px;}
</style>
演示效果：

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>http://www.zishu.cn</title>

<style>

*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}

#box{ background:#FFCC00;width:700px; border-left:200px solid #FF9900;}

#left{margin-left:-200px; width:200px; position:static;}

* html #left{position:fixed;}

#right{float:right; width:695px;}

</style>

</head>

<body>

<div id="box">

<div id="right">right <br />

right</div>

<div id="left">left</div>

<div style="clear:both"></div>

</div>

转载请注明出处：子鼠

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
方法一存在一个问题：就是如果左边的背景是一张图怎么办？对，如果是纯色，那么没有问题；如果是一张图，就没有办法了；所以我写了第二种解决办法；
实现方法二：用嵌套实现两列背景；这个方法我个人推荐使用；
程序代码
<div id="box">
<div id="content">
<div id="right">right <br />right</div>
<div id="left">left</div>
</div>
</div>
CSS部分我不用解释了吧！
程序代码
<style>
*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}
#box{ background:#FFFF66;width:700px; padding-left:200px; float:left;}
#content{ background: #FF6600; float:left;}
#right{ width:695px; float:right;}
#left{ width:200px; margin-left:-200px; position:static; float:left;}
* html #left{position:fixed;}
</style>
演示效果：

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>http://www.zishu.cn</title>

<style>

*{ padding:0; margin:0; font-size:12px; line-height:1.8; font-family:Verdana;}

#box{ background:#FFFF66;width:700px; padding-left:200px; float:left;}

#content{ background: #FF6600; float:left;}

#right{ width:695px; float:right;}

#left{ width:200px; margin-left:-200px; position:static; float:left;}

* html #left{position:fixed;}

</style>

</head>

<body>

<div id="box">

<div id="content">

<div id="right">right <br />right</div>

<div id="left">left</div>

</div>

</div>

转载请注明出处：子鼠

</body>

</html>

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

网页,教程,网页制作,背景,一行,适应,<,",>,实现

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“DIV CSS：网页一行两列背景自适应”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

最新文章

CSS实现单行、多行文本溢出显示省略号的实现

2024/11/23

实现checkbox&radio对齐的方法

2024/11/23

前端性能优化补充篇

2024/11/23

清除浮动的几种方法(推荐)

2024/11/23

Html与css基础(必看篇)

2024/11/23

一句话新闻

苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

DIV CSS：网页一行两列背景自适应

CSS初学：如何修改Zblog中的CSS

提高CSS的网页渲染效率11个注意点

评论“DIV CSS：网页一行两列背景自适应”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

DIV CSS：网页一行两列背景自适应

CSS初学：如何修改Zblog中的CSS

提高CSS的网页渲染效率11个注意点

评论“DIV CSS：网页一行两列背景自适应”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存