1

我有一个 DIV 列表，它们相互堆叠。基本上它们不是浮动的。

高度固定为 500 像素，一旦 DIV 到达底部，我希望它们从下一列开始。因此，对于大约 200 个项目，您只需水平滚动即可查看 div 而不是垂直滚动。

DIV 的数量可能非常大，理想情况下，我希望在调整屏幕大小时推动行。所以没有固定的行，它们彼此相邻浮动。

<div class="row show-grid">
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
</div>

.span1 {
width: 60px;
}

.span1-nofloat {
    float: none;
}

在此处输入图像描述

4

3 回答 3

1

使用 CSS3 列来实现使用 CSS 的流动列布局怎么样？毕竟，这就是 CSS 列的设计目的。在列布局中使用通常是块级的元素来实现这种效果的技巧是应用于display: inline-block内部元素。像这样的东西会用固定宽度的较小的 div 从上到下、从左到右填充 div。

CSS：

.columns div {
    width: 60px;
    height: 70px;
    background-color: blue;
    margin-bottom: 5px;
    display: inline-block;
}

.columns {
    overflow-x: scroll;
    padding: 5px 5px 0 5px;
    height: 242px;
    -moz-column-width: 65px;
    -webkit-column-width: 65px;
    column-width: 65px;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
    background-color: red;
}

和 HTML：

<div class="columns">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
</div>

如果您的 div 高度相同并且您想要一致的下边距，则尺寸可能有点繁琐，但您可以在几分钟内使用计算器通过将每个盒子的大小相加来计算出适合您的特定情况元素。如果你的盒子的高度会有所不同，只要确保它们都不和包含元素一样高或更高，否则它的内容会环绕到下一列；这确实是正确的行为（您不想隐藏您的内容，对吗？）但它有点难看。

这是一个演示这个想法的小提琴。

于 2013-03-20T21:13:15.303 回答
1

这是使用 CSS3 转换的解决方案：jsfiddle

这个想法是你从普通的“浮动盒子”开始，好像它们是水平堆叠的，但随后容器会转换为rotate(-90deg)，以便盒子垂直堆叠。为了纠正现在不正确的盒子内容方向，将它们转换回rotate(90deg).

因此盒子容器的宽度实际上定义了它的最终高度。尝试添加或减去盒子项目，您会注意到盒子从左到右垂直堆叠:)

于 2013-03-20T20:40:05.033 回答
0

首先，HTML。我所做的只是向容器添加一个 ID，这样我就可以轻松地获得对它的引用：

<div class="row show-grid" id="gridcontainer">
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
    ....
    <div class="span1 span1-nofloat">Item 1</div>
    <div class="span1 span1-nofloat">Item 1</div>
</div>

然后是 CSS。我为.span1类设置了边框和间距，以便更容易看到：

.span1 {
    width: 60px;
    border: solid 1px #ccc;
    padding: 20px;
}

.span1-nofloat {
    float: none;
}

.show-grid{
    max-height: 220px;
    overflow: auto;
    white-space: nowrap;
}

.show-column{
    display: inline-block;
    vertical-align: top;
}

最后是javascript。从您的 onload 事件中运行它，或者在 HTML 加载后直接运行。我只是把它放在一起，所以它可能可以改进很多：

var maxheight = 200;
var container = document.getElementById('gridcontainer');
var columns = [document.createElement('div')];
columns[0].className = 'show-column';
var currentcolumn = columns[0];
var currentheight = 0;
var count = container.childNodes.length;
for(var i=0;i<count;i++){
    var child = container.childNodes[0];
    var height = child.offsetHeight | 0;
    if(currentheight + height > maxheight){
        currentcolumn = document.createElement('div');
        currentcolumn.className = 'show-column';
        columns.push(currentcolumn);
        currentheight = 0;
    }
    currentcolumn.appendChild(child);
    currentheight += height;
}
container.innerHTML = '';
for(var j=0;j<columns.length;j++){
     container.appendChild(columns[j]);   
}

该maxheight变量是容器的最大高度，在 JavaScript 中设置为比 CSS 小 20px，因此容器有空间用于水平滚动条。

解决方案的 JSFiddle：http: //jsfiddle.net/djBK3/

于 2013-03-20T20:27:36.253 回答