多列样式布局_html/css_WEB-ITnose

效果图如下：

代码如下：

  1   2   3       4       5     127 128 129     
普通文档布局
130     
Left
131     
Right
132     133  134  135     
行内布局使用inline-block
136     
Left
137     
Right
138     139  140  141     
浮动布局float
142     
Left:
143         width: 200px;
144         height: 100px;
145         float: left;
146         green;147     
148     
Right
149         width: 60%;
150         height: 100px;
151         float: right;
152         red;153     
154     155  156  157     
浮动布局float+margin正边距与多列布局
158     
两列
159     
160             Left Sidebar
161             float: left;
162             width: 200px;
163             height: 100px;
164             green;
165     
166     
167         height: 100px;168             red;169             margin-left: 200px;/*==等于左边栏宽度==*/170         
171             Main Content172         
173     
174     175     
176         Right Sidebar
177         float: right;
178         width: 200px;
179         height: 100px;
180         green;181     
182     
183         height: 100px;184             red;185             margin-right: 200px;/*==等于右边栏宽度==*/186         
187             Main Content188         
189     
190     191     
三列
192     
193         Left Sidebar
194         float: left;
195         width: 200px;
196         height: 100px;
197         green;
198     
199     
200         Right Sidebar
201         float: right;
202         width: 200px;
203         height: 100px;
204         green;205     
206     
207         
208             Main Content
209             height: 100px;
210             red;
211             margin: 0 200px;
212         
213     
214  215  216     
浮动布局float+margin负边距与多列布局
217     
两列
218     
219         
左侧定宽200px区块
220         
width: 200px;221             float: left;222             margin-right: -100%;223             green;224         
225     
226     
227         
228             
右侧主体自适应区块
229             
.mainR:width: 100%;230             float: right;
231             
.contentR:height: 100%;232             margin-left: 200px;233             red;234             
235         
236     
237     238     
239         
240             
左侧主体自适应区块
241             
.mainL:width: 100%;242             float: left;
243             
.contentL:height: 100%;244             margin-right: 200px;245             red;
246         
247     
248     
249         
右侧定宽200px区块
250         
width: 200px;251             float: right;252             margin-left: -100%;253             green;254         
255     
256     257     
三列
258     
259         
左侧定宽200px区块
260         
width: 200px;261             float: left;262             margin-right: -100%;263             green;264         
265     
266     
267         
268             
主体自适应区块
269             
.mainR:width: 100%;270                 float: left;271             
272             
.contentLR:height: 100%;273                 margin-left: 200px;274                 margin-right: 200px;275                 red;276             
277         
278     
279     
280         
右侧定宽200px区块
281         
width: 200px;282             float: right;283             margin-left: -100%;284             green;285         
286     
287      288