Some css3 layout

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; ----------------

  

Guess you like

Origin www.cnblogs.com/caoxinbo/p/11504197.html