具有相对宽度的Css中心元素

Question

我有这个设置：

http://jsfiddle.net/Uq46e/18/

<div class="wrapper">

    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="x"></div>
    <div class="a">5</div>
    <div class="a">6</div>

</div>

我希望div类x占用剩余宽度（包装器减去其他元素）。父包装器需要保持响应。

只用css可以吗？

编辑：

更新了问题（所有元素都悬空）

Answer 1

您可以在css宽度规则中使用calc属性：

width: calc(100% - 250px);

250px是你所有其他宽度的数量。

JSfiddle

这是一个模仿CSS计算的解决方案，因此可以在IE8中使用：

$('.x').css('width', '100%').css('width', '-=250px');

JSfiddle with Javscript

Answer 2

在下面的给定课程中添加，然后检查

.x {
background: green;
width: calc(100% - 250px);
height: 50px;
float: left;
}

我在你的小提琴上测试了它。