實(shí)現(xiàn)如下效果圖
- 每個(gè)card寬度相同
- card左右之間的間距固定
- card左右之間的間距不固定
效果圖
怎么實(shí)現(xiàn)自動(dòng)換行匾旭?
- inline-block
塊級元素獨(dú)自占一行,而行內(nèi)元素當(dāng)寬度不夠時(shí),才會換行。
demo-004
card寬度怎么計(jì)算熏版?
情況一
card左右之間邊距固定,card和父容器左右邊距固定
- calc() 、margin-right推姻、nth-of-type()
demo-001
image.png
- 多一個(gè)元素、padding-left际起、padding-right
demo-002
card左右之間邊距不固定拾碌,card和父容器左右邊距固定
- margin 百分比
demo-005
card左右之間邊距不固定,card和父容器左右邊距不固定
- margin 百分比
demo-006