html - 两个固定高度/宽度 div 之间的 flex div

Question

已经有一些类似问题的答案，但这个问题有所不同。

<div class="container">
<div class="row">

    <div class="col-xs-12 col-sm-3 grey">
        <div class="wrapper">
            <div class="info">(i)</div>
            <div class="text"><div class="labeled">This is a long text</div></div>
            <div class="icon">[$]</div>
        </div>
    </div>

    <div class="col-xs-12 col-sm-9 green">
        Content
    </div>

</div>

所以我需要三个 div，在所有情况下排成一行 - 信息、文本、图标 - 两侧有两个 div 具有固定的 h/w，中间一个只占用与

• 它需要，而不是更多
• 或者可用于它，用 overflow:hidden 切断上下文

这是 fiddle http://jsfiddle.net/L7tmt5w1/3/

这是我在素描创意方面的疯狂技巧 http://imgur.com/tF0HkD2

对于那些想感受我的痛苦的人，您也可以尝试重新排序 div - 文本、图标、信息 - 当屏幕尺寸变为移动时(bootstrap 的 col-xs-)

Answer 1

对于这种情况，你可以使用display: table-cell;方法:

.wrapper {
    display: table;
    text-align: right;
    width: 100%;
}

.info {
    width: 20px;
    height: 20px;
    display: table-cell;
    background-color: #005ea8;
    color: #fff;
}

.icon {
    width: 20px;
    height: 20px;
    display: table-cell;
    background-color: #eb690b;
    color: #fff;
}

.text {
    display: table-cell;
    background-color: #ccc;
    width: auto;
}

这模仿表格显示属性并保持 .wrapper 的所有子项内联，而中间一个“flex ”，因为它没有定义宽度。您也可以删除 float 。

http://jsfiddle.net/L7tmt5w1/7/