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 {max-width:100%;}

Answer 2

您可以将<{1}}元素放在其他两个元素之后，向右浮动一个，向左浮动一个。然后给.b溢出：隐藏，这使它在清除以前浮动的元素时伸展到可用宽度：

你也有无效的HTML，修复它！

<强> HTML

.b

<强> CSS

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

JSFiddle

Answer 3

删除浮动，并以这种方式尝试：

.a {
    width: 30px;
    display:inline-block;
}
.b {
    width:calc(100% - 100px); /* key */
    display:inline-block;
}
.c {
    width: 50px;
    display:inline-block;
}

demo here

Answer 4

这样的事情怎么样？

button.a, div.b, button.c
{
    display: block;
    vertical-align: middle;
    float: left;
}

button.a, button.c
{
  width: 25%;
}

div.b
{
  width: 50%;
  text-align: center;
}

http://jsfiddle.net/NicoO/fs7aF/

您应该考虑使用网格系统。

Answer 5

最简单的方法是浮动两个按钮并让div自己填充剩余空间（如div所做）

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

与

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

可选，以确保div在这些按钮之间，即使在更多行中也是如此：

.b { margin-left: 30px; margin-right: 50px; }

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

5 个答案: