先看效果图:
图一:左右布局,左侧宽度固定,右侧自适应剩余宽度
图二:左侧宽度为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; } |