html - 设置两个元素之间可能的最大宽度

Question

我有 3 个元素:

<button class="a"></button>
<div class="b"></div>
<button class="c"></button>

这是风格:

.a {
    width: 30px;
}
.c {
    width: 50px;
    float:right;
}

我希望 div .b 是内联的(没有换行符)并且它的宽度将是 .a 和 .c 之间可用的最大宽度。
另外，我不想用绝对定位。
有什么想法吗？

Answer 1

您可以将 .b 元素放在其他两个元素之后，一个向右浮动，一个向左浮动。然后给 .b overflow:hidden，这使得它在清除以前 float 的元素的同时拉伸(stretch)到可用宽度:

您还有无效的 HTML，请修复它!

HTML

<button class="a"></button>
<button class="c"></button>
<div class="b">A</div>

CSS

.a { width: 30px; float:left; }
.c { width: 50px; float:right; }
.b { overflow:hidden; }

JSFiddle