html - 水平溢出多个内联垂直列表

Question

我的网站底部有一个信息栏。它有几个水平显示的行内 block 元素。正如您在 fiddle 中看到的那样，当内联 block 元素中的信息在垂直方向上变得太大时，它会溢出到信息栏的底部边缘以下。我希望这些东西向右溢出，类似于报纸专栏。

jsfiddle:link

<div class="information-bar">
    <div class="information">
        <div class="title">Section Title</div>
        information <br />
        information2 <br />
        information3 <br />
        information4 <br />
        information5 <br />
    </div>
    <div class="information">
        <div class="title">Section Title</div>
        information <br />
        information2 <br />
        information3 <br />
        information4 <br />
        information5 <br />
    </div>
</div>

目标是改变这个:

为此:

我试过 css3 列方法:jsfiddle . 不幸的是，我认为它只适用于一列，因为会发生这种情况:

Answer 1

我想我明白了。然而，存在一个问题:当窗口太小时，第二组信息显示在下方。但我认为这不是什么大问题，因为它没有那么广泛。

.information-bar {
width:100%;
height: 100px;
background: #999;
position: absolute;
bottom: 0;
}

.information-bar .information {
display: block;
height: 95px;
-webkit-column-width:144px;
-webkit-column-gap:16px;
-moz-column-width:144px;
-moz-column-gap:16px;
column-width:144px;
column-gap:16px;
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
}
div.information
{
float:left;
width: 304px; /*quick math: 144*2+16=304*/
}