左右布局，右侧宽度根据左侧宽度自适应

先看效果图：

图一：左右布局，左侧宽度固定，右侧自适应剩余宽度 

图二：左侧宽度为0px，右侧内容自适应100% 

下面是例子的HTML和CSS布局代码

HTML代码：

 <div id="box">
   <img src="../images/test.jpg" class="summarypic" />
   <div class="text">
     <h2>[企业热讯] <a href="#">森林半岛项目介绍</a></h2>
     <p>引入国际著名科学园区的先进理念，强调人与自然的和谐统一，突出生态发展、人文环境、产业特色。产、学、研紧密结合集教育、科研、孵化为一体，构建多元网络化的环境空间,强调人与自然的和谐统一，突出生态发展</p>
     <p class="foot"><a href="#">查看全文</a>发布日期：2009-06-20</p>
   </div>
   <div class="clear"></div>
 </div>

CSS代码：

 1 #box {
 2   background: url(../images/line.gif) left bottom no-repeat;
 3   padding: 19px 3px 21px 5px;
 4   overflow: hidden;
 5 }
 6 
 7 #box .summarypic {
 8   float: left;
 9   margin: 0 35px 0 0;
   width: 142px;
   height: 108px;
 }
 
 #box .text {
   text-align: left;
 }
 
 #box h2 {
   font: 14px/16px "宋体";
   color: #dbbe79;
   margin-bottom: 9px;
 }
 
 h2 a:link, h2 a:visited {
   font: 14px/16px "宋体";
   color: #dbbe79;
   font-weight: bold;
   text-decoration: none;
 }
 
 h2 a:hover, h2 a:active {
   text-decoration: underline;
 }
 
 #box p {
   margin: 0px;
   padding: 0px;
   font: 12px/19px "宋体";
   color: #c8c8c8;
 }
 
 #box p.foot {
   font: 12px/21px "宋体";
   color: #e2c374;
   margin-top: 15px;
   text-align: right;
 }
 
 p.foot a:link, p.foot a:visited {
   font: 12px/21px "宋体";
   color: #e2c374;
   text-decoration: underline;
   float: left;
 }
 
 p.foot a:hover, p.foot a:active {
   text-decoration: none;
 }
 
 .clear {
   clear: both;
   margin: 0px;
   padding: 0px;
   font-size: 0px;
   height: 21x;
   line-height: 0px;
 }