The idea of the layout of the Grail and the layout of the double wings

Mainly to understand the process of thinking, not just to memorize a piece of code.

1 negative margin margin-left is negative, and two elements are not in one row (can be implemented with element float:left,width:100%)Margin-left can eat the margin of sibling elements.

Imagine, suppose width:99%, leave a gap on the right, and when the margin-left is negative, let the right side of the gap go left .

That is, when the left negative value of margin is used, the element has a position in the first row when it exceeds its width. when the negative value of margin reaches 100%, the left side of the window can be reached .

This 100% is the width of the parent element. In the same way we assume that the width of the element to be squeezed is 200px, then the "Squeeze" 200px allows the element to be completely squeezed to the right of the sibling element .

Consider the following structure <div id= "BD" > <div class= "main" ></div> <div class= "left" ></div> <div class= "right" ></div> </div> According to what we said above, it can be written as follows:. main {float:left; width:100%; left {float:left; width:190px; Margin-left: -100%}. Right {Floa T:left; width:190px; Margin-left: -190px; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19-20

& lt; div id = "BD" & gt;                & lt; div class = "main" & gt; & lt; /div & gt;                & lt; div class = "left" & gt; & lt; /div & gt;                & lt; div class = "right" & gt; & lt; /div & gt;          & lt; /div & gt; According to what we said above, we can write this:. Main {           float:left;             width:100%; } . Left {           float:left;             width:190px;            margin-left:-100%; } . Right {             float:left;               width:190px;              margin-left:-190px; }

1

The above is the first step, you can see the left,right to the correct position. There must be some doubt at this time. How come this main is gone. For being squeezed away.

2 empty space to squeeze

Consider the Padding property, will give the edge of the element buffer space, that is, I left you space for you to squeeze, such as padding:0 200px, left on both sides of the 200 to make you squeeze. This is a problem, because in the document stream, the block element box includes padding Ah, if squeezed the whole box is not run.

At this time can be out of the document flow positioning, I ignore you, on top of your space squeeze, and then the parent element helplessly watching the top squeeze, the following left out of the space is blocked.

The idea is the chalice layout. (negative margin + positioning)

Give a space: #bd {padding:0 230px 0 190px;

1	#bd {padding:0 230px 0 190px;

}

1

}

. Main {

1

. Main {

Float:left; width:100%;

1 2	Float:left; Width:100%;

}

1

}

. left {float:left; width:190px margin-left: -100%; position:relative, left: -190px; right {float:left; width:23 0px; Margin-left: -230px; position:relative; Right: -230px; }

1 2 3 4 5 6 7 8 9 10 11 12 13-14

.            Left {float:left;            width:190px;            Margin-left:-100%;            position:relative; Left:-190px; } .              Right {float:left;              width:230px;              Margin-left:-230px;              position:relative; Right:-230px; }

3. Taobao ued the optimization of this

The Grail layout has been pretty good, but using relative positioning. If people add a label, to control the above said "squeeze" space.

Full Code <! DOCTYPE html>

1 2 3 4 5 6 7 8 9 to (+) (+)