多列样式布局_html/css

 1 2  3  4  5 127 128 129 
普通文档布局
130 Left131 Right132 133 134 135 
行内布局使用inline-block
136 Left137 Right138 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