javascript - 100% 宽度图像

Question

我有一个页脚，其中有一个左圆 Angular 图像，然后是中间有重复的图像，最后是右圆 Angular 图像。

如何在不重叠的情况下实现完美的响应缩放？ 就像是: .paperBottom.middle {float:left; width: (100% -40px)} (40px 是右图的宽度)

设置:

<div class="paperBottomWrapper"> 
   <div class="paperBottom left"> </div>
   <div class="paperBottom middle"> </div>
   <div class="paperBottom right"> </div>
</div>

问题是，左边和右边有圆形图形，它们必须很好地结合在一起。

Answer 1

你可以为此使用 css display:table 属性:

.paperBottomWrapper{
 width:100%;
 display:table;
}
.paperBottom{
 display:table-cell;
}

检查这个http://jsfiddle.net/A34pt/

或

你也可以在没有 display:table 的情况下实现这一点。

检查这个 http://jsfiddle.net/A34pt/1/