单列定宽单列自适应布局:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>单列定宽单列自适应布局</title> <style type="text/css"> * {margin:0;padding:0;} .cont, .side {float:left;} .cont {width:100%;} .main {margin-right:200px;background:#DDDDDD;} .side {margin-left:-200px;width:200px;background:#F7F7F7;} </style> </head> <body> <div class="cont"> <div class="main">main</div> </div> <div class="side">side</div> </body> </html>
左右定宽中间自适应布局:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>左右定宽中间自适应布局</title> <style type="text/css"> * {margin:0;padding:0;} .cont, .side, .sub-main {float:left;} .cont {width:100%;} .main {margin-right:200px;margin-left:300px;background:#DDDDDD;} .side {margin-left:-200px;width:200px;background:#F7F7F7;} .sub-main {margin-left:-100%;width:300px;background:#F7F7F7;} </style> </head> <body> <div class="cont"> <div class="main">main</div> </div> <div class="side">side</div> <div class="sub-main">sub-main</div> </body> </html>
两列等高自适应布局:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>两列等高自适应布局</title> <style type="text/css"> * {margin:0;padding:0;} .layout {overflow:hidden;} .cont, .side {float:left;padding-bottom:9999px;margin-bottom:-9999px;} .cont {width:100%;} .main {margin-right:200px;background:#DDDDDD;} .side {margin-left:-200px;width:200px;background:#F7F7F7;} </style> </head> <body> <div class="layout"> <div class="cont"> <div class="main"> main <br/><br/><br/><br/><br/><br/><br/> </div> </div> <div class="side">side</div> </div> </body> </html>
利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动”
.unknow_width_center1 {position:relative; left:50%;float:left;}
.unknow_width_center1 li {position:relative; right:50%; z-index:2;float:left}
<ul class="unknow_width_center1">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
通过给父元素设置浮动float,再设置父元素的position属性为relative和left:50%;子元素设置position:relative和left:-50%来实现水平居中。
可以保留块级元素仍然是以display:block的形式显示,不会添加无意义的标签,不添加嵌套深度。缺点是设置了position:relative;带来了一些副作用,并且需要闭合(清除)浮动。