根据前几天对css负边距的研究（《浅析css负边距》），在理解负边距的原理之后，可以用在以下情况当中（持续更新）。
一、两列布局
1、右侧定宽，左侧宽度自适应
思路：要实现效果，首先，左侧的宽度要能够自适应，那么宽度可选100%或auto，我们知道设置成100%会使左侧div的宽度为父元素的100%，设置成auto会根据左侧div的实际大小自适应宽度，那如果div里面有块级元素，右侧就会被挤到下一行，所以我们选择100%；然后我们需要在左侧div的右边空出位置给右侧div，那么只要把左侧div的宽度变短，设置右外边距为负值即可，然后负值是多少呢？当然是右侧div需要多少就是多少啦！
实现：左侧和右侧的div都设置左浮动，左侧宽度100%，并设置margn-right为右侧宽度的负值。
验证：代码如下。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>右侧定宽，左侧宽度自适应布局</title>
6 <style>
7 #left{
8 height: 200px;
9 background-color: red;
10 float: left;
11
12 width: 100%;
13 margin-right: -200px;
14
15 }
16 #right{
17 height: 200px;
18 background-color: blue;
19 width: 200px;
20 float: left;
21 }
22 </style>
23 </head>
24 <body>
25 <div id="wraper">
26 <div id="left"></div>
27 <div id="right"></div>
28 </div>
29 </body>
30 </html>
效果图如下图图一，且左侧缩放自如。
图一：
时间： 2024-10-02 00:27:38