Fatal编程技术网
  • html/
  • Html 在行/列中垂直堆叠项目，而不是水平堆叠

Html 在行/列中垂直堆叠项目，而不是水平堆叠

html css

Html 在行/列中垂直堆叠项目，而不是水平堆叠,html,css,Html,Css,我正在创建一个html页面，希望切换到滚动和浮动页面。所以在body或div中，我想要一个项目列表。每一项都应该放在前一项下，除非触及div的末尾，然后它应该放在更高的部分，依此类推。因此，如果要显示的内容太多，则应提供一个水平滚动条。基本上，如果你把屏幕旋转90度，你就会得到我想要的 示意图上的项目应如下所示： 1 4 7 10 2 5 8 11 3 6 9 12 我真的不知道从哪里开始。我不知道怎么称呼它，所以寻找它很困难 我想我需要把我的问题分成两部分 - orderi

我正在创建一个html页面，希望切换到滚动和浮动页面。所以在body或div中，我想要一个项目列表。每一项都应该放在前一项下，除非触及div的末尾，然后它应该放在更高的部分，依此类推。因此，如果要显示的内容太多，则应提供一个水平滚动条。基本上，如果你把屏幕旋转90度，你就会得到我想要的

示意图上的项目应如下所示：

1  4  7  10
2  5  8  11
3  6  9  12
我真的不知道从哪里开始。我不知道怎么称呼它，所以寻找它很困难

我想我需要把我的问题分成两部分

- ordering the items so they go in the flow like in the scheme.
- scrolling horizontally.
非常感谢您对css使用的一些指导。

我推荐css。请参阅浏览器支持

<ul class="col-2">
  <li>1</li>
  <li>2</li>
  <li>3</li>

  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<!-- 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>
通常情况下，javascript库（如Massy、同位素和packer）用于此行为，因为css列仅在较新的浏览器版本中受支持

基于父级的高度设置行数，或手动设置行数 这里有另一个选项，我用javascript填充它以使其更具动态性：

<ul class="col-2">
  <li>1</li>
  <li>2</li>
  <li>3</li>

  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<!-- 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>
JavaScript（为了简单起见使用jQuery）：

.col-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

/* raise this to increase row count! */
.container {
  height: 40px;
}

.wrap .col {
  display: inline-block;
  vertical-align: top;
}

.my-class .item {
  display: block;
}

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

<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>

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

<div id="ourWrap">
<div id="expander">
<ul id="data">
    <li>1</li>
    <li>2</li>
       ...
    <li>14</li>
    <li>15</li>
</ul>    
</div>
</div>

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

$(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);
});

var$wrap=$（'.wrap'）；
var$parent=$wrap.parent（）；
var$items=$wrap.children（）；
//基于父级高度设置行数
var rows=getRowCount（$items，$parent）；
//或者在这里手动设置
//var行=2；
集合=[]；
而（$items.length>0）{
set.push（$items.splice（0，行））；
}
set.forEach（函数（set，i）{
$set=$（set）；
$set.addClass（'item'）；
$setLi=$（'
  • ）；
$setList=$（“
      ”）；
$setList.append（$set）；
$setLi.append（$setList）；
$wrap.append（$setLi）；
});
函数getRowCount（）{
var rows=Math.floor（$parent.height（）/$items.height（））；
返回（行）？行：1；
}
      像这样的东西应该可以做到： 编辑：另外，为了向您展示它根据您在HTML中输入的信息流畅地工作，我在HTML中添加了额外的行和列

      添加了一个
      边框
      ，以便您可以查看定义

      这似乎是你想要的吗？尝试复制和粘贴
      ul
      s，并在框中放入您想要的数量

      HTML:

      .col-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

      /* raise this to increase row count! */
.container {
  height: 40px;
}

.wrap .col {
  display: inline-block;
  vertical-align: top;
}

.my-class .item {
  display: block;
}

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

      <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>

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

      <div id="ourWrap">
<div id="expander">
<ul id="data">
    <li>1</li>
    <li>2</li>
       ...
    <li>14</li>
    <li>15</li>
</ul>    
</div>
</div>

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

      $(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);
});
      编辑： 根据您的新信息，如果您想要一个
      静态div高度
      ，但项目要按照您描述的方式流动，您有两个选项。 选项1：使用jQuery脚本根据div高度识别并重新计算数据

      选项2：“…您可以牺牲W3C web标准并使用不推荐使用的标记，您可以接受语义上不符合逻辑的标记，您可以容忍表示与内容的混合，您可以告别浏览器兼容性，或者您可以使用带有大量属性的标记和带有大量规则的样式。每条路都要收费……”

      引用：

      必须说，我为这一点感到骄傲 例1：（100件，小盒子） 例2：（1000件，大箱子） 所有内容都是动态排列的，因此任何
      宽度/高度
      div
      都可以工作。此外，数据的唯一限制是78400000项左右。（无论如何，HTML都会因此而消亡）。
      
HTML:
      

      .col-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

      

      /* raise this to increase row count! */
.container {
  height: 40px;
}

.wrap .col {
  display: inline-block;
  vertical-align: top;
}

.my-class .item {
  display: block;
}

      

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

      

      <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>

      

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

      

      <div id="ourWrap">
<div id="expander">
<ul id="data">
    <li>1</li>
    <li>2</li>
       ...
    <li>14</li>
    <li>15</li>
</ul>    
</div>
</div>

      

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

      

      $(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);
});

      
jQuery:
      

      .col-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

      

      /* raise this to increase row count! */
.container {
  height: 40px;
}

.wrap .col {
  display: inline-block;
  vertical-align: top;
}

.my-class .item {
  display: block;
}

      

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

      

      <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>

      

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

      

      <div id="ourWrap">
<div id="expander">
<ul id="data">
    <li>1</li>
    <li>2</li>
       ...
    <li>14</li>
    <li>15</li>
</ul>    
</div>
</div>

      

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

      

      $(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);
});

      

      $（函数（）{
var dataRemap=[]；
var$cHeight=$（“#数据li:第一个孩子”）.height（）；
变量$wHeight=$（'#ourWrap'）.height（）；
var colHeight=$wHeight/$cheeight；
$（“li”）。每个功能（索引）{
dataRemap.push（$（this.text（））；
});
$（“#数据”）.remove（）；
var-ul；
$.each（数据映射、函数（索引、值）{
如果（索引%colHeight==0）{
$（'扩展器'）.append（ul）；
ul=$（“
        ”）；
}
变量li=$（“
      • ”）。追加（值）；
ul.附加（li）；
});
$（'扩展器'）.append（ul）；
});

      
例1：
例2：

      
那么，到底发生了什么？
将您的单个数据列表回溯到一个数组中，以便JS可以更轻松地操作它
      
然后我清空了
      ul
      中的现有项目
      
根据我们的
      数组的
      索引
      值
      ，将
      div的高度
      与
      li的
      高度
      进行比较，根据
      div当前的
      高度
      找出适合该
      div的项目总数
      
然后，我们使用一个快速脚本为容器添加一个新的
      ul
      ，用于基于该等式遇到的每个
      module
      

      我告诉过你这通常不容易Lol你是被迫使用单一的
      ul
      、
      ol
      还是
      dl
      ？你会知道有多少项是预先确定的吗？不，我不是被迫使用单一的ul、ol或dl。项目的数量是预先知道的，并且会保持不变。哦，等等，预先定义。我知道（服务器端）在页面加载之前。但对于更多/更少的项目，它应该是灵活的。BAM！！！Answeed:-）查看次要帖子。现在，如果您使用，
      列数：3
      或使用javascript将其动态设置为
      n/4
      。不幸的是，这只会生成2列。我需要设置行数，由div和p的高度设置可参考的灵活性：高度越高，行数越多，反之亦然。@WillemdeJong嗯，在我看来，另一个答案和我的更新在这方面有着相同的想法。然而，两种解决方案都需要将元素集包装在一个额外的元素中，因此这似乎也不理想。不管怎样，你都必须进行某种计算。@WillemdeJong检查这两个答案，看看你怎么想。我可能错了，但我很确定，你能自动完成这项工作的唯一方法是使用我在帖子中推荐的js库之一。感谢对这些库的引用。幸运的是，我不必支持