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

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

jsfiddle：

章节标题
信息

信息2

信息3

信息4

信息5

章节标题
信息

信息2

信息3

信息4

信息5

目标是改变这一点：

为此：

我尝试了css3列方法：。 不幸的是，我相信它只设计用于一个专栏，因为这种情况会发生：

---

我想我明白了。然而，有一个问题：当窗口太小时，第二个信息集显示在下面。但我认为这不是一个大问题，因为它没有那么宽

.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*/
}

使用来自的洞察，我们可以按列组织信息，但我们必须事先知道最大列宽：

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

.information-bar .information {
    display: inline-block;
    vertical-align: top;
    height: 95px;
}
p.info-element {
    line-height: 1.2em;
}
p.info-element:nth-child(n+1):nth-child(-n+5) {
    margin-left: 0em;
}
p.info-element:nth-child(6) {
    margin-top: -6em;
}
p.info-element:nth-child(n+6):nth-child(-n+10) {
    margin-left: 100px;
}

第n个子元素（n+1）：第n个子元素（-n+5）选择器允许我们选择一系列元素（如要点中所述）。一个有趣的css黑客

---

这是一种可以在客户端使用JavaScript或在服务器端使用任何生成HTML的服务器端语言轻松完成的事情。我认为这可能是最简单、最可维护的选项，但我不必看这里的向导们想出了什么：）为什么不使用

表
，它们是排列数据的工具…@BenjaminGruenbaum我在客户端使用它，留着胡子！它没有逻辑性，所以我必须编写一些javascript来安排内容。这确实很容易，但会有点难看。我们已经有两个很好的解决方案了@如果没有其他选项，我会使用表格。不过桌子很乱，我尽量远离它们。@LevDubinets，我不同意你的看法。所有元件均设计为具有特定功能。您使用
ul
或
ol
创建列表，您使用
p
进行段落等。为什么不使用
表格来安排数据？我觉得你不用桌子的时候会很乱。。。你可以看到，在你的情况下，你需要一大堆技巧才能得到结果。。。有了一张桌子，你不需要耍花招，它就能满足你的需要。啊！这很酷。我已经找到了另一个在IE中也能工作的解决方案，但这取决于知道列宽。
.information-bar {
    width:100%;
    height: 100px;
    background: #999;
    position: absolute;
    bottom: 0;
}

.information-bar .information {
    display: inline-block;
    vertical-align: top;
    height: 95px;
}
p.info-element {
    line-height: 1.2em;
}
p.info-element:nth-child(n+1):nth-child(-n+5) {
    margin-left: 0em;
}
p.info-element:nth-child(6) {
    margin-top: -6em;
}
p.info-element:nth-child(n+6):nth-child(-n+10) {
    margin-left: 100px;
}