折叠div

时间：2017-09-28 07:07:24

标签： html css css3 flexbox

我需要进行以下设计。

enter image description here

我知道这似乎很容易，但不是动态绑定。

首先，动态重复网格图块（v-for vuejs或ng-repreat angularjs}，因此我无法使用table和rows，我只能使用columns。

所以我使用了flexbox，一切看起来都不错，但加倍边框正在产生问题。

我试过这个，但是当连续少于4个cols时，它将无效。

.grid-table .row .col:nth-last-child(1),
.grid-table .row .col:nth-last-child(2),
.grid-table .row .col:nth-last-child(3),
.grid-table .row .col:nth-last-child(4) {
  border-bottom: 0;
}

.grid-table .row .col:nth-child(4n) {
  border-right: 0;
}

问题：如何折叠边框，解决方案也应该响应。

* {
  box-sizing: border-box;
  font-family: monospace;
}

.grid-table {
  border: 1px solid #ddd;
}

.grid-table .row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.grid-table .row .col {
  padding: 20px;
  border: 1px solid #ddd;
  width: 25%;
  height: 70px;
  margin: 0;
}

.grid-table-tile .checkbox-custom {
  width: auto;
}

.grid-table-head .col.m12.s12 {
  height: 40px;
  background: #e7e7e7;
  padding: 10px 20px;
  flex: 1 1;
}

.grid-table .row .col:nth-last-child(1),
.grid-table .row .col:nth-last-child(2),
.grid-table .row .col:nth-last-child(3),
.grid-table .row .col:nth-last-child(4) {
  border-bottom: 0;
}

.grid-table .row .col:nth-child(4n) {
  border-right: 0;
}
<div class="grid-table">
  <div class="row grid-table-head">
    <div class="col m12 s12">Complaint Type</div>
  </div>
  <div class="row">
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>

  </div>
</div>

Dynamic demo with vuejs

2 个答案:

答案 0 :(得分：2)

希望以下代码有所帮助。

在css中，下面的行匹配最后一行的第一个元素

.grid-table .row .col：nth-​​child（4n + 1）：nth-​​last-child（-n + 4）

如何手段。例如n将0,1,2 ......

所以 .grid-table .row .col：nth-​​child（4n + 1）匹配我们案例中的第一和第五元素

当n 0

时

.grid-table .row .col：nth-​​child（4（0）+1）：nth-​​last-child（-0 + 4）等于

.grid-table .row .col：nth-​​child（1）：nth-​​last-child（4）

第一个条件 .grid-table .row .col：nth-​​child（1）选择 1 div

第二个条件 .grid-table .row .col：nth-​​last-child（4）从最后选择 4 div

自1＆amp; 4是不一样的元素，条件失败

当n为1时;

.grid-table .row .col：nth-​​child（4（1）+1）：nth-​​last-child（-1 + 4）等于

.grid-table .row .col：nth-​​child（5）：nth-​​last-child（3）

第一个条件： .grid-table .row .col：nth-​​child（5）匹配 5th 元素

第二个条件： .grid-table .row .col：nth-​​last-child（3）匹配来自last的 3rd 元素（实际上是第5个元素）第一）

自第一＆amp;第二个条件指向同一个元素。

.grid-table .row .col：nth-​​child（4n + 1）：nth-​​last-child（-n + 4）选择第5个元素。

下一行

.grid-table .row .col：nth-​​child（4n + 1）：nth-​​last-child（-n + 4）〜。col 选择 5之后的元素即第6次和第7次

通过这种方式，我们可以选择网格的最后一行并删除边框底部

enter image description here 

* {
  box-sizing: border-box;
  font-family: monospace;
}

.grid-table {
  border: 1px solid #ddd;
}

.grid-table .row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.grid-table .row .col {
  padding: 20px;
  border-right: 1px solid #ddd;
  border-bottom:1px solid #ddd;
  width: 25%;
  height: 70px;
  margin: 0;
}

.grid-table-tile .checkbox-custom {
  width: auto;
}

.grid-table-head .col.m12.s12 {
  height: 40px;
  background: #e7e7e7;
  padding: 10px 20px;
  flex: 1 1;
}

.grid-table .row .col:nth-child(4n) {
  border-right: 0;
}

.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4),
.grid-table .row .col:nth-child(4n+1):nth-last-child(-n+4) ~ .col {
  border-bottom:none;
}
<div class="grid-table">
  <div class="row grid-table-head">
    <div class="col m12 s12">Complaint Type</div>
  </div>
  <div class="row">
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>
    <div class="col m3 s12">
      <div class="grid-table-tile">
        <div class="checkbox-custom">
          <input type="checkbox" class="filled-in" id="ctype-0" />
          <label for="ctype-0">Parking Issue</label>
        </div>
        <div class="grid-table-tile-title"></div>
      </div>
    </div>

  </div>
</div>

答案 1 :(得分：0)

我的简单解决方案使用负边距：

.grid-table .row .col {
    padding: 20px;
    border: 1px solid #ddd;
    width: 25%;
    height: 70px;
    margin: 0;
    margin-top: -1px;
    margin-left: -1px;
}
相关问题
最新问题