0

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

jsfiddle：链接

<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。不幸的是，我相信它只设计用于一列，因为会发生这种情况：

在此处输入图像描述

4

2 回答 2

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*/
}
于 2013-07-11T18:35:52.723 回答
1

使用这个 gist的见解，我们可以按列组织信息，但我们必须事先知道最大列宽：

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

nth-child(n+1):nth-child(-n+5) 选择器允许我们选择一系列元素（如要点中所述）。一个有趣的css hack！

jsfiddle

于 2013-07-11T18:42:53.667 回答