CSS负边距自适应布局三例
浏览数：35 /
时间：2015年06月09日
单列定宽单列自适应布局：
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
