页面布局 --- 多列等高布局

来源：互联网发布：cscl是什么软件编辑：程序博客网时间：2024/04/26 14:22

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Example</title> <style type="text/css"> body { margin:50px; font-family:'Helvetica Neue'; font-size:24px; line-height:1.5; } #container{ width:100%; overflow:hidden; } .col{ width:33.33%; float:left; text-align:center; box-sizing:border-box; padding:20px; color:#FFF; background:#2980B9; margin-bottom:-500px; padding-bottom:500px; } .col img{ width:30%; margin-top:30px; } .col:nth-child(2){ background:#3498DB; } .col:nth-child(3){ background:#67aeef; } /*body { background:#FFF; margin:50px; font-family:'Helvetica Neue'; font-size:24px; line-height:1.5; color:#FFF; } #container{ width:100%; background:#BDC3C7; overflow:hidden; } .col{ width:33.33%; float:left; text-align:center; box-sizing:border-box; padding:20px; margin-bottom:-200px; padding-bottom:200px; } .col img{ width:30%; margin-top:30px; } .col:nth-child(1){ background:#2980B9; } .col:nth-child(2){ background:#3498DB; } .col:nth-child(3){ background:#67aeef; }*/ </style> </head> <body> <div id="container"> <div class="col"> <img src="trend.png"> <h1>Trend</h1> <p>The tool refers to periodic trends for collecting and analyzing weak signals and trends in chemistry.</p> </div> <div class="col"> <img src="user.png"> <h1>User</h1> <p>User namespaces are now fully implemented as of document is obsolete.</p> </div> <div class="col"> <img src="picture.png"> <h1>Picture</h1> <p>Taking good pictures is something anyone can do with any camera, if you practice enough and avoid some common mistakes..</p> </div> </div> </body> </html>

阅读全文

0 0