iT邦幫忙

0

每三個區塊變化 (nth-child) , 但如果只有三個CSS會跑掉?

.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 重複

froce iT邦大師 2 級 ‧ 2019-07-25 21:23:26 檢舉
https://jsbin.com/buqijekomo/edit?html,css,output
這樣?

你左右寫反了而已,你要把.card向右移,得加左margin吧?

2 個回答

1
浩瀚星空
iT邦大師 1 級 ‧ 2019-07-26 09:37:39
最佳解答

請先善用F12大法來查原因。

就目前單純看你的css來說。除了那個+0之外,其它還看不太出來是有什麼問題。
畢竟也看不到你的html很難推測。

但如果就單純的css來說。你目前這樣是沒錯的。為何會這樣的問題。
我可以清測一個可能性。當3個的時候。去檢查一下你的html中有設定class = card的元件有幾個吧。

要不然就是將 .card:nth-child(3n+0) 改成 .row > .card:nth-child(3n) 試試吧

看更多先前的回應...收起先前的回應...
小松 Nana iT邦研究生 3 級 ‧ 2019-07-26 11:14:06 檢舉

我有用檢查,相同的 class 只有三個,但就是第二個吃到 nth-child,你的方式我稍後試試

小松 Nana iT邦研究生 3 級 ‧ 2019-07-26 11:32:30 檢舉

解出來了,滿奇特的⋯⋯
我以為 .row > .card 的目的是指定 class .row 的 .card 才會有作用
我在 row 中有一個是迴圈(主角 .card),一個是單獨的 div
沒想到他竟然把這個 div 也算進去,但這個 div 的 class 根本不是叫 .card,這是啥鬼啊

因為css本身沒問題。畫面確是第二個有作用。
唯一的解釋就是還有多一個看不到的card了。

我才會告訴你用局限式的作用。
因為你用單獨的card來說。是全域性的。
也就是不在row內的card也會算進去數量。我推測你的row前一定會有一個card的東西存在。

小松 Nana iT邦研究生 3 級 ‧ 2019-07-26 13:36:03 檢舉

我確定 card 只有三個,但是他把一開始的 div 也算成一個了,但他根本不叫做 card

1
dragonH
iT邦大師 1 級 ‧ 2019-07-25 19:13:35

問題重現在 github 的 issue提交 是很常被要求的

因為光憑文字敘述很難呈現你真正遇到的問題

甚至有可能你認為的問題所在根本就不是造成問題的原因

codepen

總之

我是看不出來有啥問題

你要不要看一下你說有問題的那個 card

看他的 margin 是長怎樣

看更多先前的回應...收起先前的回應...
小松 Nana iT邦研究生 3 級 ‧ 2019-07-25 19:15:17 檢舉

我有 row,但只有一個 row

小松 Nana iT邦研究生 3 級 ‧ 2019-07-25 19:17:45 檢舉

我的 row 為

.row {
    width: 1100px;
}
小松 Nana iT邦研究生 3 級 ‧ 2019-07-25 19:20:02 檢舉

那個第六個 card ,他旁邊第五個吃到 margin: 20px 0px 30px 0;,所以導致第六個靠近第五個,但我這樣設定不應該是只要每列第三個才應該是 margin: 20px 0px 30px 0;

dragonH iT邦大師 1 級 ‧ 2019-07-25 19:40:20 檢舉

是阿

我測試的也是這樣

小松 Nana iT邦研究生 3 級 ‧ 2019-07-25 19:43:43 檢舉

嗯,我跟你的 codepen 設定是一樣的,我想一下怎麼找出原因

dragonH iT邦大師 1 級 ‧ 2019-07-25 19:47:06 檢舉

我猜你是不是在這之前有其他的 .card 之類的

小松 Nana iT邦研究生 3 級 ‧ 2019-07-25 19:48:21 檢舉

我 card 是簡化貼上去的,我實際的 class 名字是唯一,只有這邊會用到這個 class(我以為有重複到,但沒有)

dragonH iT邦大師 1 級 ‧ 2019-07-25 19:51:03 檢舉

所以你的第二個 第七個都沒有類似的問題嗎

那我就不知道了/images/emoticon/emoticon20.gif

小松 Nana iT邦研究生 3 級 ‧ 2019-07-25 19:52:14 檢舉

很怪,六個的時候都正常
但是只剩下三個的時候,卻是第二個吃到 nth-child

dragonH iT邦大師 1 級 ‧ 2019-07-25 19:53:31 檢舉

那你可能確認一下

他的 margin 確定是你這 class 造成的

fillano iT邦超人 1 級 ‧ 2019-07-26 10:01:12 檢舉

用開發人員工具「檢查」,看不出來嗎?

小松 Nana iT邦研究生 3 級 ‧ 2019-07-26 11:13:16 檢舉

fillano 看不出來,只知道第二個區塊吃到 nth-child,但相同的 class 只有三個

小松 Nana iT邦研究生 3 級 ‧ 2019-07-26 11:32:49 檢舉

解出來了,滿奇特的⋯⋯
我以為 .row > .card 的目的是指定 class .row 的 .card 才會有作用
我在 row 中有一個是迴圈(主角 .card),一個是單獨的 div
沒想到他竟然把這個 div 也算進去,但這個 div 的 class 根本不是叫 .card,這是啥鬼啊

dragonH iT邦大師 1 級 ‧ 2019-07-26 11:40:19 檢舉

w3school

.row > .card

是指 parent 為 .row 的 .card

所以你的結構是?

還有你實際的寫法是?

我要發表回答

立即登入回答