效果图如下：
代码如下：
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>
转载于:https://www.cnblogs.com/Idus/p/5208774.html
