javascript - 可以防止内联块元素变得过宽并被向下推

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”之后的所有内容（根据需要显示在“左栏”的右侧），则此方法很好用，但是当该行变得太长时，内联块元素会扩展到整个屏幕，并被推到左栏下方。

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

最佳答案

表。简单！ rp

.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>

关于javascript - 可以防止内联块元素变得过宽并被向下推，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29343329/