網格中最右側的列不等於其他列

我無法使三個最右側的列與其他列的寬度相等。代碼在這裏： https://jsfiddle.net/tg4pts46/網格中最右側的列不等於其他列

除了最後一列以外，每列都有60px的填充（一個陰溝），因爲我不想在外部列上排水。這就是它的祕密，但我不知道如何解決它。這是我的意思：

[class*='col-'] { 
    padding-right: 60px; 
} 

[class*='col-']:last-of-type { 
    padding-right: 0; 
}

任何幫助，非常感謝。謝謝！

來源

2015-04-15 dwhite

你說的是最右邊的列不應該有一個60像素的填充，但仍然是相同的寬度與前兩個？你爲什麼從最後一欄中刪除墊？ –

因爲填充是一個陰溝，並在那裏會使網格不平等。右側將會有比左側更多的空白空間 – dwhite

這樣的事情呢？

CSS：

[class*='col-'] { 
    padding: 0 15px; 
} 
[class*='col-']:first-of-type { 
    padding: 0 30px 0 0; 
} 
[class*='col-']:last-of-type { 
    padding: 0 0 0 30px; 
}

工作例如：https://jsfiddle.net/NateW/tg4pts46/8/

來源

2015-04-15 18:43:05 NateW

右側，除了網格不再水平加標籤 - 頁面右側的空白區域增加60px。另外，'p'只是用來簡化問題，每列將包含所有類型的元素。謝謝你的幫助！ – dwhite

你能改變你的html標記嗎？或者只是這個CSS？ – NateW

當然，我想我可以。我希望只是用CSS做到這一點，如果可能的話 – dwhite

不知道你是否習慣使用表，TR和TD，但它似乎解決了對稱問題。 td結合了第n個孩子的僞類。

td:nth-child(1){ 
    border-right:40px solid transparent; 
} 
td:nth-child(2){ 
    border-right:20px solid transparent; 
    border-left:20px solid transparent; 
} 
td:nth-child(3){ 
    border-left:40px solid transparent; 
}

http://jsfiddle.net/SaharshSinha/89jmrtym/2/

來源

2015-04-15 19:11:59

網格中最右側的列不等於其他列

回答

相關問題