2013/11/11 淘宝首页,搜索框自适应布局(有好听的名字-双飞翼布局(圣杯布局))
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .box{min-height:500px;background:gray;} .search{display: inline;float: left;width: 100%;} .searcher{width:100%;background:#E95935;height:50px;} .left{margin-left:-100%;background:#000;float:left;display: inline;} .right{margin-left:-52px;float:left;display: inline;} .left i{width:50px;height:50px;display:block;background:pink;} .right span{width:50px;height:50px;display:block;background:#000;} </style> </head> <body> <div class="box"> <div class="search"> <div style="margin:0 200px;"> <div class="searcher"></div> </div> </div> <div class="left"> <i></i> </div> <div class="right"> <span></span> </div> </div> </body> </html>