The two-column Adaptive Layout is extended to the multi-column Adaptive Layout, and the column Adaptive Layout is extended.

The two-column Adaptive Layout is extended to the multi-column Adaptive Layout, and the column Adaptive Layout is extended.
1. Why do I need to talk about many articles on the Internet?

When talking about the Adaptive Layout of the two columns, it is estimated that many people have read similar articles, but the implementation methods are different from the two methods I often use, I often use this layout, which I immediately think. Just like we get things, we will immediately think of using our hands. Of course there are still many ways to get them, such as talking about them. Therefore, when we see a variety of implementation methods, we must learn to compare them, and then choose one or two of them as the common layout to remember deep, that is, we can use them without thinking about them.

2. Check the effect first. If you understand it, do not read other explanatory text to save time.

See the Pen Layouts by wenjie (@ wenjie) on CodePen.

Click the CodePen Logo in the upper right corner to view it on the new page.

3. Explain

The main principle of the overflow method: fixed the width (the block is set to the width, or the inline-block element's own width). The one floats and is placed at the beginning; the adaptive one must be placed at the end, the width cannot be set, that is, the width must be set to auto, and overflow must be set to Den den or scroll (to form a BFC. When overflow is visible, it cannot form BFC. You can search for articles by yourself ).

The principle of table-cel l is similar to that of overflow. The only difference is that it sets a very large width. Because table-cell has its own maximum width, therefore, we set a large value to reach its maximum width, that is, the browser edge.

The negative value of margin is quite popular on the Internet, but I do not like it very much. I think its only advantage is that it can put the labels of adaptive content at the beginning to make SEO more friendly, because SEO gets the most important content as soon as it comes in. However, the negative value of margin increases the difficulty. setting or even troubleshooting may take more time. So the negative value of margin is my attitude of learning one course. It doesn't depend on my mood.

4. Multi-Column Layout

It is the same to extend to the multi-column layout. In fact, nothing can be said. It is to move all the fixed-width columns at the beginning and put the adaptive part at the end.

5. Pay attention to the following points:

Because float is used, remember that the parent container clears the float. For example, if I directly use overflow: auto to clear the float, we can also use the class = clearfix that we often write.

If a website or article contains long English words, the word will be truncated at the edge. In this case, word-wrap will be added to the adaptive container: break-word.

6. Other Methods

There are many other methods that can be searched at will. For example, the calc (100%-x) of CSS3 is also frequently used on mobile terminals, its disadvantage is the compatibility of earlier browsers.

7. Busy work, no time, rough articles

This article may contain typos that may be hard to understand. Please note that, if it does not affect the absorption of the main content, forget it. O (∩ _ ∩) O Haha ~, If you have any knowledge errors, please do not mean to correct them. Thank you in advance.