<!DOCTYPE html> <html lang="en" > <head> <title>demo</title> <style type="text/css"> *{ margin:0; padding:0; } .box { width: 100%; background: green; display: box; overflow: hidden; display:-moz-box; /* Firefox */ display:-webkit-box; /* Safari and Chrome */ -webkit-box-orient:horizontal; } .item { -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; height: 60px; margin: 10px; background: red; } .item:first-child { -webkit-box-flex:0; width: 200px; margin: 10px; background: yellow; } .item:last-child { margin: 10px; background-color: blue; } </style> </head> <body > <div class="box"> <div class="item">column 1</div> <div class="item">column 2</div> <div class="item">column 3</div> </div> </body> </html>
html5 css3实现图中结构,布布扣,bubuko.com
原文：http://www.cnblogs.com/skylar/p/3634948.html