<!-- 方法一:使用CSS3属性calc()进行计算。注意:calc()里的运算符两边必须有空格 --> <div> <div style="float:left;width:200px;height:500px;background-color:blue;"> </div> <div style="float:left;width:calc(100% - 200px);height:500px;background-color:red;"> </div> </div> <div style="clear:both;"> <br> </div> <!-- 方法二:使用margin负值,使右边容器与左边同一行,并100%宽。再在右边容器中放一个子容器,设置margin-left值为左边容器的宽度。 --> <!-- 使用负margin,浏览器会认为这个元素的大小变小了,所以会改变布局,布局会按照元素的大小减去负margin的大小进行布局;然而实际上却没有变小,所以布局变化后显示的大小还是原大小。详情:http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 -->
<div> <div style="float:left;width:200px;height:500px;background-color:blue;"> </div> <div style="float:left;width:100%;height:500px;-background-color:red;margin-left:-200px;"> <div style="margin-left:200px;background:yellow;height:500px;"> </div> </div> </div> <div style="clear:both;"> <br> </div> <!-- 方法二:使用position,右边容器必须设置right --> <div style="position:relative;"> <div style="position:absolute;left:0;width:200px;height:500px;background-color:blue;"> </div> <div style="position:absolute;left:200px;right:0px;height:500px;background-color:red;"> </div> </div>
时间: 2024-10-05 15:30:04