能够显示彼此相邻的项目列表，没有确定的列数答案

【问题标题】：To be able to show a list of items next to each other with no definite number of columns能够显示彼此相邻的项目列表，没有确定的列数
【发布时间】：2015-04-18 15:51:16
【问题描述】：

我想在列中列出项目，以便当列表项目达到最大值时。高度然后它会自动移动到下一列

我有一行有两列

<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
 // -- <li item
</div>

我想在一列中列出项目 1、2、3，然后将其移至列。但是，我不能对列数进行硬编码，因为第 5 项需要更多空间然后第 6 项将进入下一列是动态的。

Item 1     Item4   Item6
Item 2     Item5   Item7
Item 3

【问题讨论】：

一些小提琴的例子？

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用名为 column-count 的 CSS3 功能。检查此代码和sn-p：

.three-col-list {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  height: 250px;
}

.three-col-list li {
  display: block;
  padding: 0 10px 60px;
}

<ul class="three-col-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

虽然这不使用 Bootstrap 列类，但我相信您可以使用自定义类和 Bootstrap 使用的一些填充来设置它的样式。请注意，IE9 或更早版本不支持此功能。

【讨论】：

这甚至没有对齐，每一行并不像问题所问的那样完美
每一行都不完美是什么意思？您只需设置列表的高度，它会将项目添加到一列，直到达到该高度，就像 OP 要求的那样。

【解决方案2】：

如果您希望列在动态添加任意数量的项目时保持流畅，您可以尝试将所有项目保留在一个 div 行中，如下所示：-

  <!doctype html>
  <html>
<head>
    <meta charset="utf-8">
    <title>My Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
 <div class="row" > 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 

            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div>
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 
            <div class="col-md-6 col-lg-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 

            <div class="col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                </p> 
            </div> 

        </div>
    </div>
</body>
</html>

如果内容增加，这里的列会溢出并调整到下一行。

【讨论】：

这甚至与他的要求不相近。元素需要动态生成并在每行上计算 2 个。您只是对所有值进行硬编码
在降级我的答案并给出你所谓的“解决方案”之前。你甚至读过这个问题吗？他要求解决方案涉及 twitter-bootstrap 而不是一些简单的 CSS3。您的解决方案根本不是他要求的，因为当屏幕尺寸减小或增加时它会中断。尽管无论屏幕大小如何，我的解决方案都不会中断。我进行了硬编码，因为他从未提到除了 css 之外他需要哪种语言的解决方案。

【解决方案3】：

您必须动态生成元素并附加到 div

演示：http://jsfiddle.net/cryzfcL8/7/

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>

      var data=["item1","item2","item3","item4","item5","item6","item7","item8",
          "item9"];
                var j=0;
                var k=1;
                for(var i=0;i<data.length;i++){
                    if(j<3){
                        j++;
                        var elem = document.createElement('p');
                        elem.innerHTML =data[i];  
                        console.log(elem);
                        document.getElementById('col'+k).appendChild(elem);

                    }else{
                        j=0;
                        k=k+1;
                    }

                }

 #col2{
     margin-left:10%;
     display:inline;
     margin-top:-19%;
     position:absolute;
 }
 #col3{
     margin-left:20%;
     display:inline;
     margin-top:-19%;
     position:absolute;
 }

【讨论】：