Question

我为MegaMenu写了一个Knockout绑定器，它有一个汉堡包组件

汉堡包含一系列类别和这些类别中的项目

“类别”充当标题并加粗。然后他们在下面缩进显示他们的项目

类别和项目只是从数据库中检索的字符串

汉堡包的规则如下： -

不要在列之间拆分类别

滚动前先使用3列。即不要只填充两列并有一个滚动条（垂直）

尽可能提高列数

最多3列

汉堡有最大高度限制

类别按字母顺序排列 -

订购的一个例子如下： -

假设我有以下类别（忽略其中的项目，因为它是订购的类别）

狗，汽车，猫，床，家具，爱好，家园，健身房，马匹

如果它们分成3列，它们将呈现如下

Col 1               Col 2                 Col 3
-----               -----                 -----
Beds                Dogs                  Hobbies
Cars                Furniture             Homes
Cats                Gyms                  Horses

我可以按如下方式构建html列表： -

<div>
 <ul>
   <li>Beds
     <ul>
       <li>Item 1</li>
       <li>Item 2
     </ul>
   </li>
   <li>Cars
     <ul>
       <li>Item 1</li>
      </ul>
   </li> 
   <li>Cats
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
     </ul>
   </li> 
   <li>Dogs
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
     </ul>
   </li> 
 </ul>
</div>

我可以根据我的规则使用纯css在汉堡包列中进行调整吗？

这样我可以避免我在html中正在进行的混乱循环等

Answer 1

我可以根据我的规则使用纯css在汉堡包列中进行调整吗？

不，CSS无法执行所需的均匀分布算法。在这种情况下，您仍然坚持使用HTML进行预格式化。

Answer 2

您最好的选择是使用break-inside: avoid

列列布局

来自：https://css-tricks.com/almanac/properties/b/break-inside/

幸运的是，您可以告诉浏览器保留特定元素与突破一起。

 -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
           page-break-inside: avoid; /* Firefox */
                break-inside: avoid; /* IE 10+ */

我在这里做了一个例子 http://codepen.io/HerrSerker/pen/obgddJ

.outer {
  -moz-columns: 3;
  -webkit-columns: 3;
  columns: 3;
  display: block;
}
.outer > li {
  display: block;
  padding-top: 30px;
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.outer > li > span {
  text-decoration: underline;
}
.inner {
  width: 200px;
  display: block;
  text-decoration: none;
}
.inner > li {
  display: block;
  padding-left: 10px;
  padding-top: 3px;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
  max-height: 400px;
  overflow-y: auto;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div class="wrapper"><ul class="outer">
  <li><span>Lorem ipsum dolor.</span>
    <ul class="inner">
      <li>Fuga, ratione blanditiis commodi.</li>
      <li>Obcaecati dicta ut, pariatur!</li>
      <li>Earum, illum sapiente enim.</li>
    </ul>
  </li>
  <li><span>Vel, ratione cum!</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Accusamus, odio ipsum nemo!</li>
      <li>Molestiae unde natus odio.</li>
      <li>Lorem ipsum dolor sit.</li>
      <li>Corporis, tempora nisi minus.</li>
    </ul>
  </li>
  <li><span>Aliquid, tenetur, similique.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Repellendus repellat placeat odit!</li>
    </ul>
  </li>
  <li><span>Quibusdam, necessitatibus aliquid.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>At nisi, quas veritatis!</li>
      <li>Perferendis laudantium nesciunt dolor!</li>
      <li>Distinctio quidem veniam impedit!</li>
    </ul>
  </li>
  <li><span>Sed, quam, beatae.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Voluptates temporibus provident dolores.</li>
      <li>Explicabo non minus ullam!</li>
      <li>Tenetur, molestias, debitis. Voluptatum.</li>
      <li>Quibusdam incidunt unde, laboriosam!</li>
      <li>Fugiat perferendis eligendi, dignissimos.</li>
    </ul>
  </li>
  <li><span>Lorem ipsum.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Perspiciatis, a dolore officia!</li>
    </ul>
  </li>
  <li><span>Voluptatum, ipsum?</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Odit, aliquam voluptates alias!</li>
    </ul>
  </li>
  <li><span>Dolorem, quos!</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Quae quos quas, fugit?</li>
    </ul>
  </li>
  <li><span>Cum, excepturi.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Libero distinctio, necessitatibus laborum!</li>
    </ul>
  </li>
  <li><span>Blanditiis, harum.</span>
    <ul class="inner">
      <li>Lorem ipsum dolor sit.</li>
      <li>Corporis fuga accusamus, ab?</li>
    </ul>
  </li>
</ul>
</div>

这兼容吗？见这里：http://caniuse.com/#feat=css-grid

至于排序：你不能用CSS做到这一点你必须用HTML或JS

来做

Answer 3

您可以将值display:table设置为您的父div，然后将display:table-cell设置为您的子项。这不会打破您的列。

Answer 4

我想我可以使用css列实现你想要的东西：

ul{
    ...
    column-gap: 2em;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

演示：http://jsfiddle.net/pg2xy9h2/3/

我不明白如何拥有Even up the columns as much as possible和动态数量的列。 Even up是一个除法计算，如果除数是未知的，你如何进行除法？

HTML CSS汉堡动态列

4 个答案: