html5 css3实现图中结构
<!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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。