Preface: In the previous four articles, I introduced the principle of Jiugongge and an application case. It has come to an end, but that layout still has certain limitations. Its biggest limitation is that it cannot use images with transparent rounded corners. As an interface layout method, if transparent outer rounded corners cannot be used, the scalability of this layout will be greatly affected and the layout cannot be maximized. land can be promoted. This article is to fundamentally solve this problem.
I know the root cause of this problem is that the left and right border columns in the middle are vertically the same height, because their parent container is the total container of box, not an independent container, and the left and right corner containers at the bottom are negatively offset upwards. What is moved above them blocks the background color. Therefore, when the image in the rounded container is translucent or transparent, the transparent part will show the image background of the left and right borders.
I had already discovered this problem when making the previous model of " Unbreakable Nine-square Grid Layout ". At that time, I also used transparent rounded corner pictures to make the rounded corner pictures. However, after discovering this problem later, in order to reduce the trouble, I also used transparent rounded corner pictures. The transparent part of the transparent rounded corner piece is added with a background color that is the same as the main container to avoid this problem. But this method is not the ultimate solution in the end. In our daily work, it is necessary to use translucent rounded corners to customize the interface. Therefore, in that article, it just avoided the problem without fundamentally solving it. question. After the article was published, an attentive friend finally raised this question after trying it out. Haha, it seems that I can’t avoid this problem by being lazy.
Once you know the source of the problem, fixing it is a simple matter.
Because my article is based on the article " The Unbreakable Nine-Gong Grid Layout ", if you haven't read that article yet, you might as well read it first and then read this article. This will help your digestion!
It seems that to solve this problem, I need to make some structural changes to the middle part. Because I want its left and right border containers to be vertically the same height as the content area, that is, when the height of the text content in the content area changes, the height of its left and right borders will be adjusted synchronously. This is a typical three-column layout with the same height. But what is a little different from the three-column layout I usually see is that I want the width of the middle content area to fill the entire middle width, but it is not 100% of the width, but 100% minus the width of the left and right column borders. And this width is not a percentage, they all have fixed pixel values. This needs to be solved using the method I mentioned in my previous article.
To do this I need to change the original structure:
【Structural layer】
I add a parent container to the three left, middle and right containers in the middle and define a class name middle for it. Then, the structure of the middle area should now be like this:
<div class="middle">
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">
<p>Content area< p>
</div>
</div>