像 HTML 中的列一样垂直换行答案

【问题标题】：Wrap vertically like a column in HTML像 HTML 中的列一样垂直换行
【发布时间】：2014-05-05 22:00:26
【问题描述】：

我在我的网站上使用 Div base Submenu。我喜欢用固定高度的子菜单垂直换行。

我使用 div 创建了一个菜单和子菜单。我不想使用 Ul,li。我的结构是……

<div class='submenu">
    <div class="menu"><span>item1<span></div>
    <div class="menu"><span>item2<span></div>
    <div class="menu"><span>item3<span></div>
    <div class="menu"><span>item4<span></div>
    <div class="menu"><span>item5<span></div>
    <div class="menu"><span>item6<span></div>
    <div class="menu"><span>item7<span></div>
    <div class="menu"><span>item8<span></div>
    <div class="menu"><span>item9<span></div>
    <div class="menu"><span>item10<span></div>
</div>

现在，当我运行此代码并将鼠标悬停在菜单上时，子菜单必须显示如下：

项目 1 项目 6
项目 2 项目 7
项目 3 项目 8
项目 4 项目 9
项目 5 项目 10

当子菜单的高度固定为200px时，子菜单动态的个数会是10个或15个什么的。我需要它使用 CSS。

【问题讨论】：

结束标签是什么？

标签： html css

【解决方案1】：

用于Css3属性column-count

像这样

.submenu {
  -webkit-column-count: 2;
  -webkit-column-gap:   20px;  
  -moz-column-count:    2;
  -moz-column-gap:      20px;
  column-count:         2;
  column-gap:           20px;
}

Demo

Demo-2

【讨论】：

是的，没错，但我不需要固定列。子菜单动态增加。像那里的 10 或 15 个子菜单。

【解决方案2】：

您可以使用CSS3 column-count Property，也可以添加display: table-cell;

查看fiddle

    .submenu {
        max-height: 200px;
        column-count:2;
        -moz-column-count:2;  /* Firefox */
        -webkit-column-count:2;  /* Safari and Chrome */
        display: table-cell;
}

【讨论】：

显示：未使用表格单元格。它不会分成列
@ketan 我知道，我只是添加它来看看你想要什么。这不是 100% 的宽度。这就是为什么我刚刚添加了you may :)

【解决方案3】：

是的，你可以像这样使用 CSS

.submenu {

max-height: 200px;
column-count: 2;
column-gap: 10px;

}

display:table-cell也可以使用，但是如果只有一列就不能改变宽度（我的经历）

【讨论】：