HTML CSS 汉堡包动态列

Question

我已经为具有汉堡包组件的 MegaMenu 编写了一个 Knockout 绑定(bind)

汉堡包包含一堆类别和这些类别中的元素

类别充当标题并以粗体显示。然后他们会在下方稍微缩进显示他们的元素

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

汉堡的规则如下:-

不要跨列拆分类别

滚动前先使用 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

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

的列布局

发件人:https://css-tricks.com/almanac/properties/b/break-inside/

Fortunately, you can tell the browser to keep specific elements together with 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 做