我的网站底部有一个信息栏。它有几个水平显示的内联块元素。正如您在小提琴中看到的那样,当内联块元素中的信息垂直过大时,它会溢出信息栏的下边缘。我希望这些东西溢出到右边,类似于报纸专栏。
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。 不幸的是,它只是设计用于一列,我相信,因为这发生了:
答案 0 :(得分: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*/
}
答案 1 :(得分:1)
使用this 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)选择器允许我们选择一系列元素(如gist中所述)。一个有趣的CSS黑客!