6. 实例

下面是含有上述约定的示例代码：

  1. /* ==========================================================================
  2.    Grid layout
  3.    ========================================================================== */
  5. /**
  6.  * Column layout with horizontal scroll.
  7.  *
  8.  * This creates a single row of full-height, non-wrapping columns that can
  9.  * be browsed horizontally within their parent.
  10.  *
  11.  * Example HTML:
  12.  *
  13.  * <div class="grid">
  14.  *     <div class="cell cell-3"></div>
  15.  *     <div class="cell cell-3"></div>
  16.  *     <div class="cell cell-3"></div>
  17.  * </div>
  18.  */
  20. /**
  21.  * Grid container
  22.  *
  23.  * Must only contain `.cell` children.
  24.  *
  25.  * 1. Remove inter-cell whitespace
  26.  * 2. Prevent inline-block cells wrapping
  27.  */
  29. .grid {
  30.     height: 100%;
  31.     font-size: 0; /* 1 */
  32.     white-space: nowrap; /* 2 */
  33. }
  35. /**
  36.  * Grid cells
  37.  *
  38.  * No explicit width by default. Extend with `.cell-n` classes.
  39.  *
  40.  * 1. Set the inter-cell spacing
  41.  * 2. Reset white-space inherited from `.grid`
  42.  * 3. Reset font-size inherited from `.grid`
  43.  */
  45. .cell {
  46.     position: relative;
  47.     display: inline-block;
  48.     overflow: hidden;
  49.     box-sizing: border-box;
  50.     height: 100%;
  51.     padding: 0 10px; /* 1 */
  52.     border: 2px solid # 333;
  53.     vertical-align: top;
  54.     white-space: normal; /* 2 */
  55.     font-size: 16px; /* 3 */
  56. }
  58. /* Cell states */
  60. .cell.is-animating {
  61.     background-color: # fffdec;
  62. }
  64. /* Cell dimensions
  65.    ========================================================================== */
  67. .cell-1 { width: 10%; }
  68. .cell-2 { width: 20%; }
  69. .cell-3 { width: 30%; }
  70. .cell-4 { width: 40%; }
  71. .cell-5 { width: 50%; }
  73. /* Cell modifiers
  74.    ========================================================================== */
  76. .cell--detail,
  77. .cell--important {
  78.     border-width: 4px;
  79. }