CSS layout instance series (4) How does one implement the change of the number of sub-containers in each row of the container along with the change of the browser width ?, Css container

CSS layout instance series (4) How does one implement the change of the number of sub-containers in each row of the container along with the change of the browser width ?, Css container

Hello, boys, do you remember who I am? By the way, I am ~ Chaowei ~ Well, let's get down to the point. Today's layout example is:

Implement a floating layout. The number of blue containers in each row in the red container changes with the browser width, as shown in the following figure:

Someone must have been jealous ~ It's so simple, it's not just a float of the left, it's worth mentioning? Don't worry. In fact, there are still a lot of pitfalls in it, and I will fill them one by one.

1. Implement through left floating 2. Implement through inline-block

Can this instance be completed only through left floating? No, we still have inline-block. The inline-block can be arranged horizontally as the elements in the row, but the content of the box still conforms to the behavior of the block-level box. With this feature, we can use the inline-block to create a lot of mesh-filled containers like float, without the need to clear the float. Of course, the entire layout process is easier than the left floating, as shown in the following DEMO:

See the Pen inline-block-container by xal821792703 (@ honoka) on CodePen.

Finally, I would like to thank you for reading this article. Welcome to my repo to check the source code. If you have any questions, please feel free to speak to me.