将div行强制为垂直列

时间：2015-06-18 09:38:06

标签： html css

我在容器中有一组元素，菜单项按字母顺序排列。我设置了每个元素的宽度并将它们向左浮动，从而创建了列。我的问题是按字母顺序排列然后设置为水平。

我可以以某种方式打破垂直列中的div行吗？这是150个元素，我想要每个25个，所以六列。

我的HTML：

<div class="treemenu">  
  <div class="clip"></div>
  <div class="clip"></div> 
  <div class="clip"></div> 
  <div class="clip"></div> 
  <div class="clip"></div> 
</div>

Jquery或css将是首选解决方案。

2 个答案:

答案 0 :(得分：1)

您似乎希望列表可以垂直扩展，但允许将其拆分为多个垂直列。您将看到new CSS columns specifications。但是，complete cross-browser support remains poor (many browsers only partially so)，即使使用前缀属性。

＆＃13;
＆＃13; 
.treemenu {
  background-color: #eee;
  
  /* Let's say we want 4 columns */
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  
  /* Make sure we balance out the filling */
  -webkit-column-fill: balance; /* Not yet supported */
  -moz-column-fill: balance;
  column-fill: balance;
}
.treemenu > .clip {
  border: 1px solid #333;
  padding: 1em;
  
  /* Prevent breaking within the column element */
  -webkit-column-break-inside: avoid;
  break-inside: avoid-column;
}
＆＃13; 
<div class="treemenu">
  <div class="clip">a</div>
  <div class="clip">b</div>
  <div class="clip">c</div>
  <div class="clip">d</div>
  <div class="clip">e</div>
  <div class="clip">f</div>
  <div class="clip">g</div>
  <div class="clip">h</div>
  <div class="clip">i</div>
  <div class="clip">j</div>
  <div class="clip">k</div>
  <div class="clip">l</div>
  <div class="clip">m</div>
</div>
＆＃13;
＆＃13;
＆＃13;

除了提供更多detailed documentation of the property之外，Chris Coyier也做了excellent article on how to make them responsive。

答案 1 :(得分：0)

＆＃13;
＆＃13; 
.clip {
    font: bold 12px/14px Verdana;
    padding: 5px;
    background-color: #EFEFEF;
    margin: 0 2px 2px 0;
}
.column {
    float: left;
}
.clearfix {
    clear: both;
}
＆＃13; 
<div class="treemenu">
    <div class="column">
        <div class="clip">accumsan</div>
        <div class="clip">accusam</div>
        <div class="clip">accusam</div>
        <div class="clip">aliquyam</div>
        <div class="clip">aliquyam</div>
        <div class="clip">aliquyam</div>
        <div class="clip">amet</div>
        <div class="clip">amet</div>
        <div class="clip">amet</div>
        <div class="clip">amet</div>
        <div class="clip">at</div>
        <div class="clip">augue</div>
        <div class="clip">autem</div>
        <div class="clip">blandit</div>
        <div class="clip">clita</div>
        <div class="clip">clita</div>
        <div class="clip">clita</div>
        <div class="clip">consequat</div>
        <div class="clip">consetetur</div>
        <div class="clip">consetetur</div>
        <div class="clip">consetetur</div>
        <div class="clip">delenit</div>
        <div class="clip">diam</div>
        <div class="clip">diam</div>
        <div class="clip">diam</div>
    </div>
    
    <div class="column">
        <div class="clip">diam</div>
        <div class="clip">diam</div>
        <div class="clip">diam</div>
        <div class="clip">dignissim</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolor</div>
        <div class="clip">dolore</div>
        <div class="clip">dolore</div>
        <div class="clip">dolore</div>
        <div class="clip">dolore</div>
        <div class="clip">dolore</div>
        <div class="clip">dolores</div>
        <div class="clip">dolores</div>
        <div class="clip">dolores</div>
        <div class="clip">duis</div>
        <div class="clip">duo</div>
        <div class="clip">duo</div>
        <div class="clip">duo</div>
        <div class="clip">ea</div>
    </div>

    <div class="column">
        <div class="clip">ea</div>
        <div class="clip">ea</div>
        <div class="clip">eirmod</div>
        <div class="clip">eirmod</div>
        <div class="clip">elitr</div>
        <div class="clip">elitr</div>
        <div class="clip">elitr</div>
        <div class="clip">eos</div>
        <div class="clip">eos</div>
        <div class="clip">eos</div>
        <div class="clip">erat</div>
        <div class="clip">erat</div>
        <div class="clip">eros</div>
        <div class="clip">esse</div>
        <div class="clip">est</div>
        <div class="clip">est</div>
        <div class="clip">est</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">et</div>
        <div class="clip">eu</div>
        <div class="clip">eum</div>
    </div>

    <div class="column">
        <div class="clip">facilisi</div>
        <div class="clip">facilisis</div>
        <div class="clip">feugait</div>
        <div class="clip">feugiat</div>
        <div class="clip">gubergren</div>
        <div class="clip">gubergren</div>
        <div class="clip">gubergren</div>
        <div class="clip">hendrerit</div>
        <div class="clip">illum</div>
        <div class="clip">in</div>
        <div class="clip">in</div>
        <div class="clip">invidunt</div>
        <div class="clip">invidunt</div>
        <div class="clip">invidunt</div>
        <div class="clip">ipsum</div>
        <div class="clip">ipsum</div>
        <div class="clip">ipsum</div>
        <div class="clip">iriure</div>
        <div class="clip">iusto</div>
        <div class="clip">justo</div>
        <div class="clip">kasd</div>
        <div class="clip">kasd</div>
        <div class="clip">kasd</div>
        <div class="clip">kasd</div>
        <div class="clip">kasd</div>
    </div>

    <div class="column">
        <div class="clip">labore</div>
        <div class="clip">labore</div>
        <div class="clip">labore</div>
        <div class="clip">luptatum</div>
        <div class="clip">magna</div>
        <div class="clip">magna</div>
        <div class="clip">magna</div>
        <div class="clip">molestie</div>
        <div class="clip">no</div>
        <div class="clip">no</div>
        <div class="clip">no</div>
        <div class="clip">nonumy</div>
        <div class="clip">nonumy</div>
        <div class="clip">nonumy</div>
        <div class="clip">nonumy</div>
        <div class="clip">nonumy</div>
        <div class="clip">nulla</div>
        <div class="clip">nulla</div>
        <div class="clip">odio</div>
        <div class="clip">praesent</div>
        <div class="clip">qui</div>
        <div class="clip">rebum</div>
        <div class="clip">rebum</div>
        <div class="clip">rebum</div>
        <div class="clip">sadipscing</div>
    </div>

    <div class="column">
        <div class="clip">sanctus</div>
        <div class="clip">sea</div>
        <div class="clip">sea</div>
        <div class="clip">sea</div>
        <div class="clip">sea</div>
        <div class="clip">sed</div>
        <div class="clip">sit</div>
        <div class="clip">sit</div>
        <div class="clip">sit</div>
        <div class="clip">sit</div>
        <div class="clip">takimata</div>
        <div class="clip">te</div>
        <div class="clip">tempor</div>
        <div class="clip">tempor</div>
        <div class="clip">tempor</div>
        <div class="clip">ut</div>
        <div class="clip">ut</div>
        <div class="clip">ut</div>
        <div class="clip">vel</div>
        <div class="clip">vel</div>
        <div class="clip">velit</div>
        <div class="clip">vero</div>
        <div class="clip">voluptua</div>
        <div class="clip">vulputate</div>
        <div class="clip">zzril</div>
    </div>

    <div class="clearfix"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

我有点打破了我添加标记的限制，但这是一个解决方案; - ）

但是，特里看起来更好。

相关问题
最新问题