标签：style class blog code color width
1 <div class="auto_box_1"> 2 <div class="ab1_l"><p>左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变</p></div> 3 <div class="ab1_r"><p>1右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变</p></div> 4 </div>
1 .auto_box_1 { 2 overflow: hidden; 3 } 4 5 .ab1_l { 6 width: 100px; 7 height: 200px; 8 float: left; 9 background-color: #ff0000; 10 } 11 12 .ab1_r { 13 margin-left: 101px; 14 height: 200px; 15 background-color: #00ff00; 16 width: auto; 17 18 }
方法二：
这一次我们让两个都浮动，一个设置宽度，另一个自动。等一下，如果你认为我疯了，那么说明你的基本功很扎实。浮动的效果是尽最大的可能向某一个方向上靠。但是如果这一行空间不够，就会跑到下一行。设置为自动的分栏会充满本行，不会让另一个分栏共享一行。答案当然是留出空间给定宽的分栏。不卖关子，我们使用“负边距”的方法。
1 <div class="auto_box_2"> 2 <div class="ab2_l"><p>左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变左不变</p></div> 3 <div class="ab2_r"><p>2右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变右边会变</p></div> 4 </div>
1 .auto_box_2 { 2 overflow: hidden; 3 margin-top: 100px; 4 } 5 6 .ab2_l { 7 width: 100px; 8 height: 200px; 9 float: left; 10 background-color: #ff0000; 11 } 12 13 .ab2_r { 14 margin-right: -101px; 15 height: 200px; 16 background-color: #00ff00; 17 width: 100%; 18 float: right; 19 }
标签：style class blog code color width
原文地址：http://www.cnblogs.com/webARM/p/3781837.html
