Two implementations of grid layout

There are two common layout forms for grid layouts:

1. Using the combination of methods: this way to refine the layout, conducive to expansion, but the code structure is poor;

2. Sub-selector mode: This is a structured, readable, but XX-XX-XX naming style has limited line, but it is a good way to layout

Css:

. FL{float: Left}. Fr{float: Right}. Content{Clear:both}. Header{}. Footer{Clear:both}. Siderbar{}. Main{}. W25{width:25%}. W70{width:70%}. W35{width:35%}. W60{width:60%}. W80{width:80%}. W15{width:15%}. content-lr-7025. Main{float: Left;width:70%}. content-lr-7025. Sidebar{float: Right;width:25%}. content-rl-7025. Main{float: Right;width:70%}. content-rl-7025. Siderbar{float: Left;width:25%}. content-lr-6035. Main{float: Left;width:60%}. content-lr-6035. Siderbar{float: Right;width:35%}. content-rl-6035. Main{float: Left;width:35%}. content-rl-6035. Siderbar{float: Right;width:60%}

Interface

1 <!--Mesh Layout -2         <Divclass= "header"></Div>3         <Divclass= "Content">4             <Divclass= "main fl w70"></Div>5             <Divclass= "Siderbar fr w25"></Div>6         </Div>7         <Divclass= "Content">8             <Divclass= "Main fr w60"></Div>9             <Divclass= "Siderbar fl w35"></Div>Ten         </Div> One         <Divclass= "Footer"></Div> A          -         <!--How to select the Web - -         <Divclass= "header"></Div> the         <Divclass= "content-lr-7025"> -             <Divclass= "Main"></Div> -             <Divclass= "Siderbar"></Div> -         </Div> +         <Divclass= "content-rl-6035"> -             <Divclass= "Main"></Div> +             <Divclass= "Siderbar"></Div> A         </Div> at         <Divclass= "Footer"></Div>

View Code

Two implementations of grid layout