Question

我有一个DIV列表，它们堆叠在一起。基本上他们没有浮动。

高度固定为500px，一旦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;
}

enter image description here

Answer 1

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

这个想法是你从普通的“浮动框”开始，好像它们是水平堆叠一样，然后用rotate(-90deg)转换容器，这样盒子就会垂直堆叠。要更正现在不正确的框内容方向，请使用rotate(90deg)转换回来。

因此，盒子容器的宽度实际上定义了它的最终高度。尝试添加或减去框项目，你会发现这些框从左到右垂直堆叠：）

Answer 2

使用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都是相同的高度而且你想要一致的底部边距，那么尺寸可能有点繁琐，但你可以在几分钟内通过计算器加起来计算出你的特定情况每个元素的大小。如果您的盒子会因高度而异，请确保它们中没有一个高于或高于包含元素，或者其内容将包裹到下一列;这真的是正确的行为（你不想隐藏你的内容，对吗？）但它有点不雅观。

Here's a fiddle证明了这一想法。

Answer 3

首先是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/

堆叠div但让它们以固定高度包裹

3 个答案: