首頁 > web前端 > html教學 > 经典DIV+CSS案例--两列高度自适应_html/css_WEB-ITnose

经典DIV+CSS案例--两列高度自适应_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:30:21
原創
1302 人瀏覽過

相信很多人都非常喜欢用div+css布局,无论你是前端开发者,还是后台程序员,因为它的好处实在太多,可以用很少的代码来控制布局,然后用CSS表现其形态,表现和样式分离。而且在SEO方面,它还能提供30%的优化,我们何乐而不为呢。

很多人都会碰到如题的布局问题,解决方案很多,可以用背景图来填充,或用js来控制,但终不是最佳方案,最好还是从DIV,CSS本身来考虑:

以下为三行两列的的经典模式,还可以演变成多种布局,有待大家修改:

 

Code
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



两列高度自适应










我在左边
 
我在左边
 
我在左边

我在左边
 
我在左边
 
我在左边
 
我在左边

我在左边

我在左边
 
我在左边

我在左边
 
我在左边

我在左边

我在左边

我在左边

我在左边
 
我在左边





我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文


  










 

配上效果图:

 

 

 

 

本方案在IE6,IE7,IE8,FF下均测试通过,虽然简单,但是用处广泛,希望对广大web标准爱好者有所帮助

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板