Question

https://jsfiddle.net/Ff49Z/118/

<div class="container">
    <span class="left_bar">
        aaaaaa<br />
        bbbbbb<br />
        cccccc<br />
    </span>
    <span class="content">
        1 2 3 4 5 55555555555555555555 7777777777777 888888888 11111111111 22222222222222 333333333333333 444444444444444444<br />
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
        6<br />
        8<br />
    </span>
</div>

如果删除了内容范围第一行中第一个“5”之后的所有内容（它根据需要显示在“左侧栏”的右侧），则此功能完全正常，但是当行变得太长时， inline-block元素扩展到整个屏幕并被推到左侧栏下方。

目前可以使用左浮点数和块元素来完成，但我想知道是否有使用内联块的解决方案。

Answer 1

表。 Simples！啁啾

.container{
    display:table;
}
.left_bar {
    display:table-cell;
    vertical-align:top;
}
.content {
    display:table-cell;
    vertical-align:top;
}

<div class="container">
    <span class="left_bar">
        aaaaaa<br />
        bbbbbb<br />
        cccccc<br />
    </span>
    <span class="content">
        1 2 3 4 5 55555555555555555555 7777777777777 888888888 11111111111 22222222222222 333333333333333 444444444444444444<br />
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
        6<br />
        8<br />
    </span>
</div>

Answer 2

使用white-space: nowrap;

.content {
    display:inline-block;
    vertical-align:top;
    white-space: nowrap;
}

<强> DEMO

Answer 3

将white-space: nowrap添加到您的.container div。如果您希望内联块中的文本换行，则必须将白色空间设置为正常。

.container{
    white-space:nowrap;
}
.container > span {
    white-space:normal;
}
.left_bar {
    display:inline-block;
    vertical-align:top;
}
.content {
    display:inline-block;
    vertical-align:top;
}

<div class="container">
    <span class="left_bar">
        aaaaaa<br />
        bbbbbb<br />
        cccccc<br />
    </span>
    <span class="content">
        1 2 3 4 5 55555555555555555555 7777777777777 888888888 11111111111 22222222222222 333333333333333 444444444444444444<br />
        1<br />
        2<br />
        3<br />
        4<br />
        5<br />
        6<br />
        8<br />
    </span>
</div>

可以防止内联块元素变得太宽并且向下推动

3 个答案: