码迷,mamicode.com
首页 > 其他好文 > 详细

网栅格布局

时间:2017-12-03 16:28:06      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:css3   code   min   round   100%   body   box   --   html   

其中最主要运用到了 calc 这个 css3 功能

    width: calc(50% - 20px);
    // 在宽度50%的情况下,减去20px的值

html 代码

<!-- col-md-4 -->
<!-- 适用于应屏幕宽度大于 768px 的场景 -->
    <div class="row">
        <div class="col-md-4 col col-sm-6"></div>
        <div class="col-md-4 col col-sm-6"></div>
        <div class="col-md-4 col col-sm-12"></div>
    </div>
    <div class="row">
        <div class="col-md-3 col col-sm-3"></div>
        <div class="col-md-6 col col-sm-6"></div>
        <div class="col-md-3 col col-sm-3"></div>
    </div>
    <div class="row">
        <div class="col-md-1 col-sm-2 col "></div>
        <div class="col-md-1 col-sm-2 col"></div>
        <div class="col-md-2 col-sm-8 col"></div>
        <div class="col-md-2 col-sm-3 col"></div>
        <div class="col-md-6 col-sm-3 col"></div>
    </div>    

css 代码

    body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.row {
  clear: both;
  height: auto;
}

.row .col {
  box-sizing: border-box;
  border: 1px solid #999999;
  background-color: #EEEEEE;
  height: 50px;
  float: left;
  margin: 10px 10px 10px 10px;
}

/* 最小宽度769px */
@media only screen and (min-width: 769px){
  .row .col-md-6 {
    width: calc(50% - 20px);
  }
  .row .col-md-4 {
    width: calc( 33.3% - 20px)
  }
  .row .col-md-3 {
    width: calc(25% - 20px)
  }
  .row .col-md-2 {
    width: calc(16.7% - 20px)
  }
  .row .col-md-1 {
    width: calc(8.3% - 20px)
  }
}

/* 最大宽度 768px */
@media only screen and (max-width: 768px){
  .row .col-sm-6 {
    width: calc(50% - 20px);
  }
  .row .col-sm-12 {
    width: calc( 100% - 20px)
  }
  .row .col-sm-8 {
    width: calc( 66.6% - 20px)
  }
  .row .col-sm-3 {
    width: calc(25% - 20px)
  }
  .row .col-sm-2 {
    width: calc(16.7% - 20px)
  }
  .row .col-sm-1 {
    width: calc(8.3% - 20px)
  }
}

网栅格布局

标签:css3   code   min   round   100%   body   box   --   html   

原文地址:http://www.cnblogs.com/ar13/p/7966243.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!