多列样式布局

效果图如下：
代码如下：
  1 <!DOCTYPE html>
  2 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3     <meta charset="UTF-8">
  4     <title>Document</title>
  5     <style>
  6         * {
  7             margin: 0;
  8             padding: 0;
  9         }
 10         h2 {
 11             margin: 20px 0;
 12         }
 13         .left1 {
 14             width: 200px;
 15             height: 100px;
 16             green;
 17         }
 18         .right1 {
 19             width: 60%;
 20             height: 100px;
 21             red;
 22         }
 23         .left2 {
 24             width: 200px;
 25             height: 100px;
 26             green;
 27             display: inline-block;
 28         }
 29         .right2 {
 30             width: 60%;
 31             height: 100px;
 32             red;
 33             display: inline-block;
 34         }
 35         .left3 {
 36             width: 200px;
 37             height: 100px;
 38             float: left;
 39             green;
 40         }
 41         .right3 {
 42             width: 60%;
 43             height: 100px;
 44             float: right;
 45             red;
 46         }
 47         .mainL, .sitebarL, .mainR, .sitebarR {
 48             height: 200px;
 49             /*font: bolder 20px/200px '微软雅黑';*/
 50             color: #fff;
 51             text-align: center;
 52         }
 53         .mainL {
 54             width: 100%;
 55             float: left;
 56         }
 57         .mainR {
 58             width: 100%;
 59             float: right;
 60         }
 61         .mainL .contentL {
 62             height: 100%;
 63             margin-right: 200px;
 64             red;
 65         }
 66         .mainR .contentR {
 67             height: 100%;
 68             margin-left: 200px;
 69             red;
 70         }
 71         .contentLR {
 72             height: 100%;
 73             margin-left: 200px;
 74             margin-right: 200px;
 75             red;
 76         }
 77         .sitebarL {
 78             width: 200px;
 79             float: left;
 80             margin-right: -100%;
 81             green;
 82         }
 83         .sitebarR {
 84             width: 200px;
 85             float: right;
 86             margin-left: -100%;
 87             green;
 88         }
 89         .clear {
 90             width: 100%;
 91             clear: both;
 92             height: 10px;
 93         }
 94         #left {
 95                 float: left;
 96                 width: 200px;
 97                 height: 100px;
 98                 green;
 99         }
100  
101         #contentL {
102             height: 100px;
103             red;
104             margin-left: 200px;/*==等于右边栏宽度==*/
105         }
106         #right {
107             float: right;
108             width: 200px;
109             height: 100px;
110             green;
111         }
112  
113         #contentR {
114             height: 100px;
115             red;
116             margin-right: 200px;/*==等于左边栏宽度==*/
117         }
118         #contentLR {
119             height: 100px;
120             red;
121             margin: 0 200px;
122         }
123         .cont {
124             overflow: hidden;
125         }
126     </style>
127 </head>
128 <body>
129     <h2>普通文档布局</h2>
130     <div class="left1">Left</div>
131     <div class="right1">Right</div>
132     <div class="clear"></div>
133  
134  
135     <h2>行内布局使用inline-block</h2>
136     <div class="left2">Left</div>
137     <div class="right2">Right</div>
138     <div class="clear"></div>
139  
140  
141     <h2>浮动布局float</h2>
142     <div class="left3">Left:<br>
143         width: 200px;<br>
144         height: 100px;<br>
145         float: left;<br>
146         green;
147     </div>
148     <div class="right3">Right<br>
149         width: 60%;<br>
150         height: 100px;<br>
151         float: right;<br>
152         red;
153     </div>
154     <div class="clear"></div>
155  
156  
157     <h2>浮动布局float+margin正边距与多列布局</h2>
158     <h3>两列</h3>
159     <div id="left">
160             Left Sidebar<br>
161             float: left;<br>
162             width: 200px;<br>
163             height: 100px;<br>
164             green;<br>
165     </div>
166     <div id="contentL">
167         height: 100px;
168             red;
169             margin-left: 200px;/*==等于左边栏宽度==*/
170         <div id="contentInner">
171             Main Content
172         </div>
173     </div>
174     <div class="clear"></div>
175     <div id="right">
176         Right Sidebar<br>
177         float: right;<br>
178         width: 200px;<br>
179         height: 100px;<br>
180         green;
181     </div>
182     <div id="contentR">
183         height: 100px;
184             red;
185             margin-right: 200px;/*==等于右边栏宽度==*/
186         <div id="contentInner">
187             Main Content
188         </div>
189     </div>
190     <div class="clear"></div>
191     <h3>三列</h3>
192     <div id="left">
193         Left Sidebar<br>
194         float: left;<br>
195         width: 200px;<br>
196         height: 100px;<br>
197         green;<br>
198     </div>
199     <div id="right">
200         Right Sidebar<br>
201         float: right;<br>
202         width: 200px;<br>
203         height: 100px;<br>
204         green;
205     </div>
206     <div id="contentLR">
207         <div id="contentInner">
208             Main Content<br>
209             height: 100px;<br>
210             red;<br>
211             margin: 0 200px;<br>
212         </div>
213     </div>
214  
215  
216     <h2>浮动布局float+margin负边距与多列布局</h2>
217     <h3>两列</h3>
218     <div class="sitebarL">
219         <h4>左侧定宽200px区块</h4>
220         <p>width: 200px;
221             float: left;
222             margin-right: -100%;
223             green;
224         </p>
225     </div>
226     <div class="mainR">
227         <div class="contentR">
228             <h4>右侧主体自适应区块</h4>
229             <p>.mainR:width: 100%;
230             float: right;</p>
231             <p>.contentR:height: 100%;
232             margin-left: 200px;
233             red;
234             </p>
235         </div>
236     </div>
237     <div class="clear"></div>
238     <div class="mainL">
239         <div class="contentL">
240             <h4>左侧主体自适应区块</h4>
241             <p>.mainL:width: 100%;
242             float: left;</p>
243             <p>.contentL:height: 100%;
244             margin-right: 200px;
245             red;</p>
246         </div>
247     </div>
248     <div class="sitebarR">
249         <h4>右侧定宽200px区块</h4><h4>
250         <p>width: 200px;
251             float: right;
252             margin-left: -100%;
253             green;
254         </p>
255     </h4></div>
256     <div class="clear"></div>
257     <h3>三列</h3>
258     <div class="sitebarL">
259         <h4>左侧定宽200px区块</h4>
260         <p>width: 200px;
261             float: left;
262             margin-right: -100%;
263             green;
264         </p>
265     </div>
266     <div class="mainL">
267         <div class="contentLR">
268             <h4>主体自适应区块</h4>
269             <p>.mainR:width: 100%;
270                 float: left;
271             </p>
272             <p>.contentLR:height: 100%;
273                 margin-left: 200px;
274                 margin-right: 200px;
275                 red;
276             </p>
277         </div>
278     </div>
279     <div class="sitebarR">
280         <h4>右侧定宽200px区块</h4><h4>
281         <p>width: 200px;
282             float: right;
283             margin-left: -100%;
284             green;
285         </p>
286     </h4></div>
287     <div class="clear"></div> 
288 </body></html>

 

posted @ 2016-02-23 09:01  Idus  阅读(360)  评论(0)  编辑  收藏  举报