一朋友初学DIV+CSS，几天前他问我：一行两列，要怎么弄背景才能自动适应高度变化。本想偷个懒，于是我在网上搜索“一行两列高度自适应”，哇噻，搜索出不少结果，但一细看，懵了！一是由于互联上很多不负责任的拷贝行为，错漏百出；二是有些写法自身就繁复罗嗦，有的存在错误。把文章地址转发给他，结果他几经折腾还是没弄懂到底要怎么弄。无奈，为了让朋友能快速理解，只好自己操刀写代码并解释给他听。后来一想，初学不容易，那不如自己写个教程上来共享一下，力求做到逻辑清晰，简单易懂。
首先看一下代码（省略一些常规代码）：
<head>
<style type="text/css">
.content { width:1002px}
.contentBG { float:left; background:#FFF url(images/allBg.jpg) no-repeat;}
.left { float:left; background:#0FC; width:700px;}
.right { float:right; background:#FF0; width:302px;}
</style>
</head>
<body>
<div class="content">
<div class="contentBG">
<div class="right">right内容<br />内容<br /></div>
<div class="left">left内容<br />left内容<br />left内容<br />left内容<br />left内容<br /></div>
</div>
</div>
</body>
我尽量让上面的代码写得最简单，这样容易理解。接下来分析一下上面的代码：
浏览器渲染假想图：
代码可视化逻辑图：
content
|
代码DIV嵌套结构：
{ content [ contentBG ( right ) ( left ) ] }
CSS部分：
.content { width:1002px}
//设定最外面的大盒子的属性（这个如果不写也是可行的）。特别提醒一下，这个盒子的background属性是不起作用的，写也白写。
.contentBG { float:left; background:#FFF url(images/allBg.jpg) no-repeat;}
//这个盒子跟.content的盒子的区别是有float和bachground属性，作用是把.content的盒子撑开，把背景色或图片显示出来，所以这个是非写不可的，而且背景属性只有写在这才能看到效果。
.left { float:left; background:#0FC; width:600px;}
//左则的基本属性是float和width。bachground属性是为了让新手看到更直观的效果，理解得更透彻。width属性也可以用百分比%。
.right { float:right; background:#FF0; width:402px;}
//同上。
//left和right的float的属性值分别是left和right，而并非都是left。
大家注意一下，上面的代码中没有任何一个控制高度的属性，完全是根据left或者right的高度来决定的。这个应用广泛而且简单实用的技巧，希望能给初学者带来方便。
如果有错误的地方，恭请大家指正。
拒绝所有形式和理由的转载。如转载或指正，请与我联系。
