标签：
百度前端技术学院
任务八：响应式网格（栅格化）布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IFE Task1-8</title> <style> body{ margin:0; } .container{ box-sizing: border-box; padding: 10px; } /*清除浮动*/ .row:before, .row:after { content:""; display:table; clear:both; } /*给每个块添加基础样式*/ [class*=‘col-‘]{ box-sizing: border-box; float: left; background-color: #eee; border: 1px solid #999; height: 50px; margin: 10px; font-size: 12px; text-align: center; line-height: 50px; } /*大于768px*/ @media (min-width: 769px) { .col-md-1{ width: calc( 8.333% - 20px ); } .col-md-2{ width: calc( 16.666% - 20px ); } .col-md-3{ width: calc( 25% - 20px ); } .col-md-4{ width: calc( 33.333% - 20px ); } .col-md-6{ width: calc( 50% - 20px ); } } /*小于768px*/ @media (max-width: 768px) { .col-sm-2{ width: calc( 16.666% - 20px ); } .col-sm-3{ width: calc( 25% - 20px ); } .col-sm-6{ width: calc( 50% - 20px ); } .col-sm-8{ width: calc( 66.666% - 20px ); } .col-sm-12{ width: calc( 100% - 20px ); } } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6">1-1</div> <div class="col-md-4 col-sm-6">1-2</div> <div class="col-md-4 col-sm-6">1-3</div> </div> <div class="row"> <div class="col-md-3 col-sm-3">2-1</div> <div class="col-md-6 col-sm-6">2-2</div> <div class="col-md-3 col-sm-3">2-3</div> </div> <div class="row"> <div class="col-md-1 col-sm-2">3-1</div> <div class="col-md-1 col-sm-2">3-2</div> <div class="col-md-2 col-sm-8">3-3</div> <div class="col-md-2 col-sm-3">3-4</div> <div class="col-md-6 col-sm-3">3-5</div> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/carol1987/p/5504516.html
