我正在创建一个html页面，并希望切换到页面的滚动和浮动。所以在身体或div中我想要一个项目列表。除非触及div的末尾，否则每个项目都应该在前一个项目之下，然后它应该在更高的部分上，依此类推。因此，如果有很多要显示它应该给出一个水平滚动条。基本上如果你将屏幕旋转90度就可以得到我想要的东西。
示意性的项目应该是这样的：
1 4 7 10
2 5 8 11
3 6 9 12
我真的不知道从哪里开始。我不知道怎么称呼它，所以很难找到它。
我想我需要在2
中解决我的问题- ordering the items so they go in the flow like in the scheme.
- scrolling horizontally.
使用css的一些方向将非常受欢迎。
答案 0 :(得分：3)
我建议使用css columns 。请参阅浏览器支持 here 。
<ul class="col-2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<强> CSS：
.col-2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
通常，像Mason，Isotope和Packery这样的javascript库会用于此行为，因为css列仅在更新的浏览器版本中受支持。
这是另一种选择，我用javascript填充它以使其更具动感： Live demo (click).
<!-- you can determine the row count according to this container's size -->
<!-- this element is otherwise unnecessary -->
<div class="container">
<ul class="wrap">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<强> CSS：
/* raise this to increase row count! */
.container {
height: 40px;
}
.wrap .col {
display: inline-block;
vertical-align: top;
}
.my-class .item {
display: block;
}
JavaScript（简单来说就是jQuery）：
var $wrap = $('.wrap');
var $parent = $wrap.parent();
var $items = $wrap.children();
//set row count based on parent height
var rows = getRowCount($items, $parent);
//or set it manually here
//var rows = 2;
sets = [];
while ($items.length > 0) {
sets.push($items.splice(0, rows));
}
sets.forEach(function(set, i) {
$set = $(set);
$set.addClass('item');
$setLi = $('<li class="col"></li>');
$setList = $('<ul></ul>');
$setList.append($set);
$setLi.append($setList);
$wrap.append($setLi);
});
function getRowCount() {
var rows = Math.floor($parent.height() / $items.height());
return (rows) ? rows : 1;
}
答案 1 :(得分：1)
编辑：另外，为了向您展示它根据您投入HTML的信息流畅地工作，我在HTML中添加了额外的行和额外的列。
添加了border，以便您可以看到定义。
这似乎做你想要的吗？尝试复制并粘贴ul，并在框中放置任意数量的内容。
<强> HTML：
<div id="ourWrap">
<div class="expander">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<ul>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
</div>
<强> CSS：
#ourWrap {
width:100px;
border:1px solid #000;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
}
.expander ul {
display:table-cell;
}
.expander li {
list-style:none;
}
static div height，但您可以按照您描述的方式流动项目，则有两个选项。选项1 ：使用jQuery脚本根据div高度识别和重新计算数据。
选项2 ：“...您可以牺牲W3C Web标准并使用弃用的标记，您可以使用低于语义逻辑的标记，您可以容忍混合使用内容，你可以告别浏览器的兼容性，或者你可以使用那些沉重的属性和样式的标记，这些标记很重要。每条道路都会造成损失......“
答案 2 :(得分：1)
所有动态排列，因此任何width/height div都可以使用。此外，仅限数据约为78,400,000项。 （无论如何，哪种HTML会死掉。）
<强> HTML：
<div id="ourWrap">
<div id="expander">
<ul id="data">
<li>1</li>
<li>2</li>
...
<li>14</li>
<li>15</li>
</ul>
</div>
</div>
<强> CSS：
#ourWrap {
height:100px;
width:200px;
border:1px solid #000;
overflow-x:scroll;
overflow-y:hidden;
position:absolute;
}
ul {
display:table-cell;
}
li {
list-style:none;
}
<强> jQuery的：
$(function() {
var dataRemap = [];
var $cHeight = $('#data li:first-child').height();
var $wHeight = $('#ourWrap').height();
var colHeight = $wHeight/$cHeight;
$( "li" ).each(function( index ) {
dataRemap.push($(this).text());
});
$('#data').remove();
var ul;
$.each(dataRemap, function (index, value) {
if(index % colHeight === 0) {
$('#expander').append(ul);
ul = $('<ul>');
}
var li = $('<li>').append(value);
ul.append(li);
});
$('#expander').append(ul);
});
获取您的单个数据列表，并回溯到数组中，以便 JS 可以更轻松地操作它。
然后我清空了ul中的现有项目。
根据我们index的{{1}}值，并将array的高度与div项的height进行比较，找出了基于当前li的{{1}}符合div的总项目。
然后我们使用快速脚本根据该等式为其遇到的每个height向容器添加新的ul。