Layout: has a head, a tail, there is content, middle part to put the foremost part of the content, and then left, reight; floating make three in a row, the emergence of highly collapsed, content clear float; Middle width to 100%, accounting for full; left up, pulled to the left: margin-left: -100%; right Similarly: margin-left: -200px; middle content is left, right cover not shown, so the middle pull back the content, content: {padding : 0 200px}; this time are followed and right lefe pulled back, left and right vacated 200px. So with the relative positioning of the left, right pull back; the problem: If a column too much content, text overflow. Solution: Contour layout; minimum width problem: min-width: 600px ---------------
- Grail layout requirements: width of the page varies, three-column layout adaptive rendering priority intermediate box, fixed width on both sides of the box;
- demand:
- 1. The fixed sides, adaptive intermediate;
- 2. The first load the middle content;
- 3. The three contour layout;
-
Step:
Layout: has a head, a tail, the content, middle portion on the most front part to the content, then the left, reight;
float so that three in a row, the height of collapse occurs, clear float content;
Middle width is set to 100% , fill;
left up, pulled to the left: margin-left: -100%; right Similarly: margin-left: -200px;
middle content is left, right cover not shown, so the middle pull back the content, content: {padding: 0 200px};
this time are followed and right lefe pulled back, left and right vacated 200px. So with the relative positioning of the left, right pull back;
the problem:
If a column too much content, text overflow. Solution: Contour layout;
minimum width problem: min-width: 600px
----------------
Flying wing
demand and the Holy Grail layout is the same;
reportedly Flying Wing Yu Bo is greatly enhanced, the idea is: middle is the bird's body, left and right wings of a bird, first put the main thing middle, and then the wings moved into an appropriate position;
step
middle portion to be placed foremost part of the content, then the left, reight;
float so that three in a row, the height of collapse occurs, clear float content;
middle width is set to 100%, filled;
left up , pulled to the left: margin-left: -100%; right the same way: margin-left: -200px;
above are the same layout and the Holy Grail;
because the content is now middle of the left and right covers, in addition we consider setting up peripherals the content outside the padding, the margin may also be considered a middle pull over;
in the middle of the internal element plus a middle-inner, set its margin: 0
200px; ----------------