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

这是小提琴http://jsfiddle.net/L7tmt5w1/3/

以下是我在草拟想法时的疯狂技巧http://imgur.com/tF0HkD2

对于那些想要感受到我的痛苦的人，你也可以尝试重新订购divs - 文本，图标，信息 - 当屏幕大小移动时（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的所有子项保持为内联，将中间的子项保持为“弹性”，因为它没有定义的宽度。你也可以删除花车。

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

Answer 2

也许此解决方案可以帮助您DEMO

<aside class="panel">
    ...
</aside>
<div class="content">
    ...
</div>


.content {
    overflow: hidden;
  border: 1px  solid;
}
.panel {
    float: right;
    width: 200px;
  border: 1px  solid;
}

Answer 3

您可以尝试此http://jsfiddle.net/L7tmt5w1/3/

记住：如果要将元素浮动到右侧，它必须是第一个元素。例如：

<div style="float:right"></div>
<div style="float:left"></div>

AND DIV已经是块元素，因此您不必将display:block添加到DIV - 元素

Answer 4

我不知道这是否是你想要的：jsfiddle

如果不满足＆＃34;文字＆＃34;没有div ...如果内容太多，那就隐藏了

（但你可以添加

overflow:auto

到滚动条的文本div

两个固定高度/宽度div之间的弹性div

4 个答案: