Flying wing layout and the Holy Grail is an important front-end layout engineers need to master daily. The same two functions, is to achieve a fixed width on both sides, the width of the middle three-column layout adaptation.
Grail advantage Flying wing layout of: using the layout, the main part of the rendering priority
- Grail layout: by means of the other non-main padding element covers the width of its parent element occupied by the same cup, which only the main elements of the non-occupied part of the total value of the padding container;
- Flying wing: a main portion main-wrap to add a main outer element, the space occupied by other non-essential elements of the main part (main-wrap) the margin space, like the wings of a bird, with the main portion main disengaged ( and the main main-wrap Flying wing element is below id).
-
Holy Grail layout
A little: no need to add dom node
Disadvantages: the layout of the shortcomings of the Holy Grail: Under normal circumstances there is no problem, but it will expose the shortcomings of this scheme in exceptional cases, if the browser wireless amplification, "Holy Grail" will be "broken" off. As shown, when the left portion is less than the width of the main portion occurs layout disorder. (Main <left i.e. deformed)
Flying wing
Objective: To prioritize the middle of the main part of the browser rendering engine and render in the render tree is constructed (who should who should build a good show), so at the time of writing, the first main part of the middle building, but because of the layout of reasons, left asynchronous placed on the left of center, and therefore appeared Flying wing.
Advantages: will not be modified as the Holy Grail layout
The disadvantages are: an added layer node dom
Extended: Positioning: like this layout, you can also use Positioning Completed
