标签：
根据前几天对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>
效果图如下图图一，且左侧缩放自如。
图一：
标签：
原文地址：http://www.cnblogs.com/lovelyun/p/4773676.html
