DIV+CSS自动适应宽高度_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:31:04
Original
1079 Leute haben es durchsucht

DIV+CSS自适应宽度:

<!DOCTYPE html/><html><head><title>自适应宽度实例--www.ops.cc</title><style type="text/css">/* 自适应宽度 */#left{width:150px;margin-right:-150px;float:left;}#center{width:auto;margin:0 0 0 150px;}#right{width:140px;margin-left:-140px;float:right;}/* 自适应高度度 *//* warp 用于隐藏溢出的部分 */#wrap{overflow:hidden;}#left,#center,#right{padding-bottom:20000px;margin-bottom:-20000px;}</style></head><body><div id="wrap"><div id="left" style="background:#333;height:600px;">左边栏,固定宽度150px;高度600px</div><div id="right" style="background:#555">右边栏,固定宽度150px;高度:自适应</div><div id="center" style="background:#888">中间栏,宽度:自适应,高度:自适应</div></div></body></html>
Nach dem Login kopieren

1. 注意适应宽度时候是将左栏和右栏先排列好后让中间栏自由排列,所以

的顺序

2. 自动高度将重写div的margin-bottom属性,当同时自动宽度和自动高度时。最好自动高度样式应在自动宽度之后。


#sidebar { width:auto; float:left;margin:0 762px 0 0;}
#main{width:742px;float:right;margin-left:-762px}

 

文章原创转载请注明出处:http://newmin.cnblogs.com/archive/2010/11/04/div-css-auto-width-and-height.html

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage