如何动态调整div的大小以占用最大可能宽度？

Question

我需要为我的网站标题完成以下情况：

因此，中间的图像需要居中并具有固定的宽度。在该图像的左侧和右侧是应该占据剩余空间的div。

当然我可以使用javascript来监听屏幕宽度的变化，但是由于这个构造代表了企业标识的标识，因此js解决方案会很难看，因为它只会在用户停止拖动而不是连续停止时调整div的大小拖着。

另请注意，div应永远不会换行，所有3个元素应始终位于水平线上。如果屏幕尺寸为150像素，则div应该具有0px的宽度，并且只有图像应该可见。

有什么想法吗？

Answer 1

使用CSS3 calc()函数

.left-div{
    width: calc((100% - 150px) / 2);
}

Caniuse calc()

Answer 2

如果您需要支持IE8，我会使用display: table-cell：

<div class="table">
    <div class="outer">div</div>
    <div class="image">image</div>
    <div class="outer">div</div>
</div>

div {
    display: table-cell;
}

div.table {
    display: table;
    width: 100%;
}

类似于：http://jsfiddle.net/R68eQ/