Question

我正在使用CSS列进行 3列网格：

这是Grid结构：

______________ ________________ _________________
   div 1a           div 1b            div 1c  

   div 2a           div 2b            div 2c  

   div 3a           div 3b            div 3c

我在父div上使用以下CSS代码：

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 10px;

这可以很好地处理上面的三列，但一旦没有。列中的项目变为2或1，它变为：

______________ ________________ _________________
div 1a              div 3a            div 2b  
div 2a              div 1b            div 3b

即将两个项目重新平衡为3列。

如何防止这种情况，并将两个项目分为两列，一个项目只列在一列中？

Answer 1

CSS列并不意味着用作构建网格系统的基础，这基本上是您正在寻找的。相反，你可以通过简单地浮动和嵌套包装在容器中的div来实现这一点。那样的话，当行的数量为＆＃39;在列中波动时，它们将保持包含在其容器内，而不是从一列跳到下一列。这样的事情可能适合你要做的事情：这是jsfiddle。

HTML

<div class="container">

    <div class="col">
        <h1>Column One</h1>
        <div class="row">
            <p>div1a</p>
        </div>
        <div class="row">
            <p>div1b</p>
        </div>
        <div class="row">
            <p>div1c</p>
        </div>
    </div>

    <div class="col">
        <h1>Column Two</h1>
        <div class="row">
            <p>div1a</p>
        </div>
        <div class="row">
            <p>div1b</p>
        </div>
    </div>

    <div class="col">
        <h1>Column Three</h1>
        <p>...</p>
    </div>

</div>

<div class="container">

    <div class="col">
        <h1>Column One</h1>
        <div class="row">
            <p>div1a</p>
        </div>
        <div class="row">
            <p>div1b</p>
        </div>
        <div class="row">
            <p>div1c</p>
        </div>
    </div>

    <div class="col">
        <h1>Column Two</h1>
        <div class="row">
            <p>div1a</p>
        </div>
        <div class="row">
            <p>div1b</p>
        </div>
        <div class="row">
            <p>div1c</p>
        </div>
    </div>

</div>

CSS

  *,
  *:before,
  *:after {
      box-sizing: border-box;
  }
  body,
  html {
      font-family: Tahoma, sans-serif;
  }
  .container {
      width: 100%;
      postition: relative;
  }
  .container:before,
  .container:after {
      content: " ";
      /* 1 */
      display: table;
      /* 2 */
  }
  .container:after {
      clear: both;
  }
  /* IE 6/7 */
  .container {
      *zoom: 1;
  }
  .col {
      width: 33.3%;
      display: inline-block;
      float: left;
      margin: 0;
      border: 1px solid green;
      margin-bottom: 1em;
  }
  .row {
      border: 1px solid blue;
  }

在同一CSS列中对齐Div的集合

1 个答案: