折疊 div 的邊框

Question

我需要進行以下設計。

我知道這看起來很容易，但不是動態綁定。

首先，網格圖塊將動態重復（ vuejs v-for或ng-repreat的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>

使用 vuejs 動態演示

Answer 1

希望下面的代碼有幫助。

在 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)在我們的例子中匹配第 1 個和第 5 個元素。

當 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 & 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)匹配第 5 個元素

第二個條件： .grid-table .row .col:nth-last-child(3)匹配最后一個元素的第 3 個元素（實際上是第一個元素的第 5 個元素）

因為第一個和第二個條件指向同一個元素。

.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在我們的例子中選擇5th之后的元素，即6th和7th

這樣我們就可以選擇網格的最后一行並去除邊框底部

 * { 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>

Answer 2

我的簡單解決方案使用負邊距：

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