Question

我正在尝试构建我的第一个响应式布局。我希望在垂直线中显示列表项，具体取决于宽度。

<div style="height:800px;">
    <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
    </ul>
</div>

如果浏览器调整大小，我希望它成为

1  4  7
2  5
3  6

有人能帮助我吗？我已经尝试了几个小时，我什么都得不到。我尝试过使用表格，但我也不能这样做。

Answer 1

这可以很容易地使用 CSS3 列来完成。这是一个例子，HTML：

#limheight {
    height: 300px; /*your fixed height*/
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}

#limheight li {
    display: inline-block; /*necessary*/
}

<ul id = "limheight">
 <li><a href="">Glee is awesome 1</a></li>
 <li><a href="">Glee is awesome 2</a></li>
 <li><a href="">Glee is awesome 3</a></li>
 <li><a href="">Glee is awesome 4</a></li>    
 <li><a href="">Glee is awesome 5</a></li>
 <li><a href="">Glee is awesome 6</a></li>
 <li><a href="">Glee is awesome 7</a></li>
 <li><a href="">Glee is awesome 8</a></li>
 <li><a href="">Glee is awesome 9</a></li>
 <li><a href="">Glee is awesome 10</a></li>
 <li><a href="">Glee is awesome 11</a></li>
 <li><a href="">Glee is awesome 12</a></li>    
 <li><a href="">Glee is awesome 13</a></li>
 <li><a href="">Glee is awesome 14</a></li>
 <li><a href="">Glee is awesome 15</a></li>
 <li><a href="">Glee is awesome 16</a></li>
 <li><a href="">Glee is awesome 17</a></li>    
 <li><a href="">Glee is awesome 18</a></li>
 <li><a href="">Glee is awesome 19</a></li>
 <li><a href="">Glee is awesome 20</a></li>
</ul>

Answer 2

如果您查看以下示例 - 它使用固定宽度列，我认为这是请求的行为。

http://www.vanderlee.com/martijn/demo/column/

如果底部示例与顶部示例相同，则您不需要jquery列插件。

＆＃13;

ul{margin:0; padding:0;}

#native {
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  -o-column-width: 150px;
  -ms-column-width: 150px;
  column-width: 150px;
  
  -webkit-column-rule-style: solid;
  -moz-column-rule-style: solid;
  -o-column-rule-style: solid;
  -ms-column-rule-style: solid;
  column-rule-style: solid;
}

＆＃13;

<div id="native">
  <ul>
    <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>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
  </ul>
</div>

＆＃13;

Answer 3

谢谢你这个例子，SPRBRN。它帮助了我。我可以根据上面给出的代码建议我使用的mixin：

//multi-column-list( fixed columns width)
  @mixin multi-column-list($column-width, $column-rule-style) {
  -webkit-column-width: $column-width;
  -moz-column-width: $column-width;
  -o-column-width: $column-width;
  -ms-column-width: $column-width;
  column-width: $column-width;

  -webkit-column-rule-style: $column-rule-style;
  -moz-column-rule-style: $column-rule-style;
  -o-column-rule-style: $column-rule-style;
  -ms-column-rule-style: $column-rule-style;
  column-rule-style: $column-rule-style;
 }

使用：

   @include multi-column-list(250px, solid);

Answer 4

根据需要创建包含任意数量列表元素的列表。然后将列表括在div中，设置style = column-width和style = column-gap，以匹配列表元素中的信息。不要设置style = columns。完全响应列表，适应屏幕大小。无需插件。

Answer 5

您可以使用CSS3。

以下是HTML代码段：

<ul id="listitem_ascolun">
	<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>
	<li>10</li>
	<li>11</li>
	<li>12</li>    
</ul>

＆安培;这是CSS3代码段：

#listitem_ascolun ul{margin:0;padding:0;list-style:none;}

#listitem_ascolun {
    height: 500px;  
    column-count: 4;
	-webkit-column-count: 4;
	-moz-column-count: 4;
}

#listitem_ascolun li {
    display: inline-block;
}

Answer 6

使用css的列宽属性，如下所示

<ul style="column-width:135px">

Answer 7

您可以按以下方式使用flex：

.parent-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 100px;
}

根据需要调整max-height属性以生成另一列

Answer 8

CSS：

#cols {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

HTML

<div id="cols">
    <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    <li>List item 5</li>
    <li>List item 6</li>
    <li>List item 7</li>
    <li>List item 8</li>
    <li>List item 9</li>
    <li>List item 10</li>
    <li>List item 11</li>
    <li>List item 12</li>
    <li>List item 10</li>
    <li>List item 11</li>
    <li>List item 12</li>
   
    </ul>
</div>

检查演示：https://codepen.io/pen/

如何将列表项显示为列？

8 个答案: