程序员人生网站导航

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

栏目：htmlcss时间：2013-12-26 03:30:48

　　先看效果图：

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

图二：左侧宽度为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;
}

------分隔线----------------------------

上一篇 GlassFish v2添加到MyEclipse

下一篇 Hook Javascript Function

------分隔线----------------------------