css实现栅格的方法

 

1. 方法一

1.1. 效果

 

2. 方法二

2.1. 效果

 

3. 代码

3.1. Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet/less" type="text/css" href="test.less"/>
    <script src="lib/less-1.7.1.min.js" type="text/javascript"></script>

</head>
<body>
<h2>方法一</h2>

<div class="method-01">
    <div class="row">
        <div class="cell cell-01"></div>
        <div class="cell cell-02"></div>
    </div>
    <div class="row">
        <div class="cell cell-01"></div>
        <div class="cell cell-02"></div>
    </div>
</div>

<h2>方法二</h2>

<div class="method-02">
    <div class="row">
        <div class="cell cell-01"></div>
        <div class="cell cell-02"></div>
    </div>
    <div class="row">
        <div class="cell cell-01"></div>
        <div class="cell cell-02"></div>
    </div>
</div>
</body>
</html>

　　

3.2. Less

body {
  margin: 0;
}

.row {
  background: #000;
  margin-bottom: 10px;

  .cell {
    &.cell-01 {
      width: 100px;
      height: 200px;
      background: #FF0;
    }

    &.cell-02 {
      width: 200px;
      height: 300px;
      background: #F0F
    }
  }
}

.method-01 {
  .row {
    .cell {
      display: inline-block;
      vertical-align: top;
    }
  }
}

.method-02 {
  .row {
    width: 100%;
    display: inline-block;

    .cell {
      float: left;
    }
  }
}

　　

 

posted @ 2016-02-16 17:56  泪已凝  阅读(652)  评论(0)  编辑  收藏  举报