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

This article will explain in detail what to do after the DIV layer joins margin. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The solution of automatic line wrapping beyond the parent layer after the DIV layer is added with margin

Let's take a look at the example of line wrapping after adding margin to the floating layer:

For example, there is a DIV width of 380px, it has a menu list, each width of 60px magazine marginal right is 20px. If you follow the HTML structure below, can the menu list be displayed on one line in the DIV?

Winhd1 winhd2 winhd3 winhd4 winhd5

5 menus, each width is 60px, the right margin is 20px, so the overall width of each menu is 80pxMagol 5 menus with a total length of 400px, while the parent layer width is only 380px, according to the floating principle, then the fifth menu will undoubtedly be squeezed down and then the line will be changed.

◆ take a look at the following solutions:

The code is as follows:

Winhd1 winhd2 winhd3 winhd4 winhd5

The width of the parent layer 380px, and the width of the mask layer overflowDIV is set to the 400px hidden required by the menu. Therefore, naturally, the extra 20 pixels of the mask layer will not be displayed. And the menu does whatever it wants within the width of the 400px.

This is the end of the article on "what to do after the DIV layer joins margin". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.