国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > CSS:左右布局,右侧根据左侧宽度自适应

CSS:左右布局,右侧根据左侧宽度自适应

来源:程序员人生   发布时间:2013-12-26 03:30:48 阅读次数:3157次

  先看效果图:

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

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

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

以下为引用的内容:
 <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代码:

以下为引用的内容:
#box {
    background: url(../images/line.gif) left bottom no-repeat;
    padding: 19px 3px 21px 5px;
    overflow: hidden;
  }
 
  #box .summarypic {
    float: left;
    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;
 }

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生