.row {
width: 1100px;
}
.card {
display: inline-block;
width: 353px;
margin: 20px 15px 30px 0;
vertical-align: top;
}
.card:nth-child(3n+0) {
margin: 20px 0px 30px 0;
}
三區塊一列
所以我希望做的是
每列第一跟列第二的 margin 會往右 15px 間隔
但是當「每列第三個（最右邊那塊）」的時候就取消 15px
這樣看起來是正常
https://imgur.com/nEWHWi0
但是如果只有三個（甚至其他情境？）
就會失效
https://imgur.com/NNS8DFv
我猜是我 nth-child 有誤⋯⋯屢試不爽
求高手一眼看穿⋯⋯
確定該頁沒有其他 class 重複
已邀請的邦友 {{ invite_list.length }}/5
請先善用F12大法來查原因。
就目前單純看你的css來說。除了那個+0之外，其它還看不太出來是有什麼問題。
畢竟也看不到你的html很難推測。
但如果就單純的css來說。你目前這樣是沒錯的。為何會這樣的問題。
我可以清測一個可能性。當3個的時候。去檢查一下你的html中有設定class = card的元件有幾個吧。
要不然就是將 .card:nth-child(3n+0) 改成 .row > .card:nth-child(3n) 試試吧
解出來了，滿奇特的⋯⋯
我以為 .row > .card 的目的是指定 class .row 的 .card 才會有作用
我在 row 中有一個是迴圈（主角 .card），一個是單獨的 div
沒想到他竟然把這個 div 也算進去，但這個 div 的 class 根本不是叫 .card，這是啥鬼啊
因為css本身沒問題。畫面確是第二個有作用。
唯一的解釋就是還有多一個看不到的card了。
我才會告訴你用局限式的作用。
因為你用單獨的card來說。是全域性的。
也就是不在row內的card也會算進去數量。我推測你的row前一定會有一個card的東西存在。
我確定 card 只有三個，但是他把一開始的 div 也算成一個了，但他根本不叫做 card
問題重現在 github 的 issue提交 是很常被要求的
因為光憑文字敘述很難呈現你真正遇到的問題
甚至有可能你認為的問題所在根本就不是造成問題的原因
總之
我是看不出來有啥問題
你要不要看一下你說有問題的那個 card
看他的 margin 是長怎樣
我有 row，但只有一個 row
我的 row 為
.row {
width: 1100px;
}
那個第六個 card ，他旁邊第五個吃到 margin: 20px 0px 30px 0;，所以導致第六個靠近第五個，但我這樣設定不應該是只要每列第三個才應該是 margin: 20px 0px 30px 0; ？
是阿
我測試的也是這樣
嗯，我跟你的 codepen 設定是一樣的，我想一下怎麼找出原因
我猜你是不是在這之前有其他的 .card 之類的
我 card 是簡化貼上去的，我實際的 class 名字是唯一，只有這邊會用到這個 class（我以為有重複到，但沒有）
所以你的第二個 第七個都沒有類似的問題嗎
那我就不知道了
很怪，六個的時候都正常
但是只剩下三個的時候，卻是第二個吃到 nth-child
那你可能確認一下
他的 margin 確定是你這 class 造成的
用開發人員工具「檢查」，看不出來嗎？
iThome鐵人賽
看影片追技術