Three-row Grail layout and double-wing layout

Related references:

Http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html

http://www.imooc.com/wenda/detail/254035

Http://www.cnblogs.com/langzs/archive/2013/01/27/taobaoshuangfeiyi.html

First, the Holy Grail layout

<! DOCTYPE html>"ZH-CN"> "UTF-8"> <title> Test the problem of relative ambiguity </title> <meta http-equiv="x-ua-compatible"Content="Ie=edge"> <meta name="Viewport"Content="Width=device-width"> <link rel="stylesheet"href="Css/test.css"> class="Head">head</div> <divclass="Container Clear-fix"> <divclass="Main">main</div> <divclass=" Left">left</div> <divclass=" Right">right</div> </div> <divclass="Footer">footer</div> </body>
The corresponding style file:
. Head {width: -%; Background-Color:orange; Min-height:50px;}. container {padding-left:200px; Padding-right:150px; }.main {width: -%; Background-Color:pink; Min-height:300px; float: Left;    }.left {width:200px; Background-color:red; Min-height:300px; float: Left; Margin-left:- -%;    position:relative; Top:0; Left:-200px;}.    Right {width:150px; Background-color: #999; Min-height:300px; float: Left; Margin-left:-150px;    position:relative; Top:0; Right:-150px}.footer {width: -%; Background-Color:yellow; Min-height:30px;}. Clear-Fix:before,.clear-fix:after {content:""; display:table;}. Clear-fix:after {clear:both;}. Clear-Fix {zoom:1;}
Two, double wing layout
HTML code
<! DOCTYPE html>"ZH-CN"> "UTF-8"> <title> Test the problem of relative ambiguity </title> <meta http-equiv="x-ua-compatible"Content="Ie=edge"> <meta name="Viewport"Content="Width=device-width"> <link rel="stylesheet"href="Css/test.css"> class="Head">head</div> <divclass="Container Clear-fix"> <divclass="Main"> <divclass="Main-wrapper">main</div> </div> <divclass=" Left">left</div> <divclass=" Right">right</div> </div> <divclass="Footer">footer</div> </body>
CSS style code
. Head {width: -%; Background-Color:orange; Min-height:50px;} . Main {width: -%; Background-Color:pink; Min-height:300px; float: Left; }.main-Wrapper {margin-left:200px; Margin-right:150px;}.    Left {width:200px; Background-color:red; Min-height:300px; float: Left; Margin-left:- -%;    }.right {width:150px; Background-color: #999; Min-height:300px; float: Left; Margin-left:-150px; }.footer {width: -%; Background-Color:yellow; Min-height:30px;}. Clear-Fix:before,.clear-fix:after {content:""; display:table;}. Clear-fix:after {clear:both;}. Clear-Fix {zoom:1;}
Three-row Grail layout and double-wing layout