标签:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右固定,中间自适应</title> <style> html , body , div{ margin:0; padding:0; } .left , .right { float: left; width:300px; height:300px; background:orange; } .right{ float: right; } .center{ height:300px; background:red; } </style> </head> <body> <div class="left">左边</div> <div class="right">右边</div> <div class="center">中间</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左右自适应,中间固定</title> <style> html , body , div{ margin:0; padding:0; } .left, .right { float: left; margin: 0 0 0 -300px; width: 50%; } .main { width: 600px; float: left; background: green; } .inner { padding: 20px; } .left .inner, .right .inner { margin: 0 0 0 300px; background: orange; } .left, .right { float: left; margin: 0 0 0 -300px; width: 50%; *width: 49.9%; } </style> </head> <body> <div class="left"> <div class="inner">左边</div> </div> <div class="main"> <div class="inner">中间</div> </div> <div class="right"> <div class="inner">右边</div> </div> </body> </html>
CSS 左右固定,中间自适应宽度 及 左右自适应宽度,中间固定
标签:
原文地址:http://www.cnblogs.com/zion0707/p/4480677.html