Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve css with the right margin of the floating sub-element list, I hope you will learn something after reading this article, let's discuss it!

List of floating child elements with right margin

What was your first thought when you saw this effect? Is it possible that the child element sets margin-right, and nth-child (3n) is also set to 0 when traversing, to see what we can do with the above knowledge?

.wrap2 {width:320px;border:dashed 1px orange;}. Wrap2 .inner {overflow:hidden; margin-right:-10px;}. Wrap2 .item {float:left;width:100px;height:100px;margin:10px 10px 10px 0

Instead of setting the margin of nth-child (3n) to 0, we "enlarge" the parent element with a negative margin.

After reading this article, I believe you have a certain understanding of "how css implements the list of floating sub-elements with right margin". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.