当前位置:Gxlcms > html代码 > WEB标准布局Div+CSS高度自适应方法_html/css_WEB-ITnose

WEB标准布局Div+CSS高度自适应方法_html/css_WEB-ITnose

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

自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,由于事先不知道具体高度,只能根据内容的增减自适应高度,很多情况下要求两列(或三列)Div的高度相同,以前用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。一般的做法,大都采用背景图填充或 JS 脚本控制的方法使各Div高度相同,这里看到一个解决方法,记录如下:

它主要是采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合方式,示例代码如下:


< html XMLns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > Div + CSS Example, Wayhome's Blog
< style type ="text/css" >


< body >
< div id ="wrap" style ="width:300px; background:#FFFF00;" >
< div id ="sidebar_left" style ="float:left;width:100px; background:#FF0000;" > Left
< div id ="sidebar_mid" style ="float:left;width:100px; background:#666;" >
Middle < br />
Middle < br />
Middle < br />
Middle < br />
Middle < br />
Middle < br />
Middle < br />
Middle < br />
Middle < br />

< div id ="sidebar_right" style ="float:right;width:100px; background:#0000FF;" > Right


人气教程排行