当前位置:Gxlcms > html代码 > 经典DIV+CSS案例--两列高度自适应_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:23人阅读

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

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

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

Code




两列高度自适应












我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文

我在正文













配上效果图:

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

人气教程排行