Heim >Web-Frontend >HTML-Tutorial >用 DIV + CSS 做液态布局(宽度自适应)_html/css_WEB-ITnose

用 DIV + CSS 做液态布局(宽度自适应)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:30:30992Durchsuche

长话短说,用 DIV + CSS 做液态布局(宽度自适应),具体用到“负值外补丁”的方法 (negative margins)。
下面我们来做一个三栏液态布局(three-column liquid layout)

首先 Body 和 外框 的代码:

body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left;}


三栏的代码分别如下:

/*左边栏,固定宽度*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中间栏,自适应宽度*/
.wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*右边栏,固定宽度*/
.wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}


到这里,框架已经完成,以下是完整代码:








[绀轰
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn