javascript - 如何创建具有不同元素内容但高度相同的两列

Question

例子，

Category 1  Category 3
   menu         menu cat3
   menu 2   Category 4
   menu 3       menu cat4
   menu 4       menu cat4
Category 2  Category 5
   menu x       menu cat 5

假设布局：

<div class="cat">
    <span>Category 1</span>
    <div class="sub">
        <div class="menu">123</div>
        <div class="menu">123</div>
        <div class="menu">123</div>
        <div class="menu">123</div>
    </div>
</div>
<div class="cat">
    <span>Category 2</span>
    <div class="sub">
        <div class="menu">123</div>
    </div>
</div>
<div class="cat">
    <span>Category 3</span>
    <div class="sub">
        <div class="menu">123</div>
    </div>
</div>
<div class="cat">
    <span>Category 4</span>
    <div class="sub">
        <div class="menu">123</div>
        <div class="menu">123</div>
    </div>
</div>
<div class="cat">
    <span>Category 5</span>
    <div class="sub">
        <div class="menu">123</div>
    </div>
</div>

此菜单具有相同的高度，但具有不同的类别和类别元素。如何在自动模式下使用 css + html 执行此操作？

可能吗？

标签： javascripthtmlcss

Answer 1

您可以使用CSS 列来创建此类布局。

.column-wrap {
  column-count: 2; // Creates 2 column layout
}

.cat {
  break-inside: avoid; // Stops a category from overflowing to the next column
}

<div class="column-wrap">
  <div class="cat">
    <span>Category 1</span>
    <div class="sub">
        <div class="menu">123</div>
        <div class="menu">123</div>
        <div class="menu">123</div>
        <div class="menu">123</div>
    </div>
  </div>
  <div class="cat">
      <span>Category 2</span>
      <div class="sub">
          <div class="menu">123</div>
      </div>
  </div>
  <div class="cat">
      <span>Category 3</span>
      <div class="sub">
          <div class="menu">123</div>
      </div>
  </div>
  <div class="cat">
      <span>Category 4</span>
      <div class="sub">
          <div class="menu">123</div>
          <div class="menu">123</div>
      </div>
  </div>
  <div class="cat">
      <span>Category 5</span>
      <div class="sub">
          <div class="menu">123</div>
      </div>
  </div>
</div>