具有一个固定宽度列的布局，一个用于拉伸以填充空白空间的流体，以及一个与其内容一样宽的流体

Question

我需要制作三个列，其中一个需要固定宽度，一个需要流动以填充空白空间，一个需要流动，但要具有其子女的组合固定宽度（他们不要不必内联，我只是编写代码以使我的问题更清楚。）

三列所在的div具有可变宽度，并且所有空的额外空间必须仅转到其中包含输入的一列（也必须拉伸以填充该列宽度，但是一旦列工作，这将不是一个问题。）

这是我的代码，右栏必须保持三个包含框的宽度：

.container {
    width: 100%;
    display: table;
    vertical-align: top;
}

.col_left {
    width: 100px;
    display: table-cell;
    background: #708A91;
}

.col_mid {
    display: table-cell;
}

.col_mid input {
    width: 100%;
}

.col_right {
    display: table-cell;
    background: #708A91;
}

.col_right .element_with_variable_width {
    padding: 10px
}

.inline_box {
    display: inline-block;
    vertical-align:  top;
    height:19px;
    width: 30px;
    margin: 0 5px;
    background-color: #E066FF;
}

<div class="container">
    <div class="col_left"></div>
    <div class="col_mid">
        <input type="text">
    </div>
    <div class="col_right">
        <span class="element_with_variable_width">
            <span class="inline_box"></span>
            <span class="inline_box"></span>
            <span class="inline_box"></span>
        </span>
    </div>
</div>

有什么想法吗？这可以单独用CSS完成吗？

Answer 1

因此，display: table;和display: table-cell;的密钥是左列和右列的宽度由其内容决定，white-space: nowrap;允许内联列不被{向下推{1}}中间栏。

这是一个有效的答案，而width: 100%;并非邪恶：http://colintoh.com/blog/display-table-anti-hero

display: table;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    display: table;
    vertical-align: top;
}

.col_left {
    display: table-cell;
    background: #708A91;
}

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

.col_mid input {
    width: 100%;
}

.col_right {
    display: table-cell;
    background: #708A91;
    white-space: nowrap;
}

.logo {
    display: inline-block;
    vertical-align:  top;
    width: 100px;
    height:19px;
}

.inline_box {
    display: inline-block;
    vertical-align:  top;
    height:19px;
    width: 30px;
    margin: 0 5px;
    background-color: #E066FF;
}