html - 如何在不更改 HTML 的情况下将单个 UL 拆分为两列布局？

Question

我有来自 CMS 的这个标记，我无法更改。我唯一能做的就是为每个 li 添加自定义类。有了这些限制，我需要完成一个特定的布局。这是我当前的标记：

<ul class="sub-menu">
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  <li><a>something</a></li>
  
  <li class="somestuff">some markup</li>
</ul>

我目前的 CSS 得到的是：

我需要完成的是：

这可以在 .sub-menu 上使用 flexbox 或其他东西吗？

编辑：我制作了一个 codepen，所以它更容易理解 - https://codepen.io/anon/pen/ZRGxNE 我需要右边的绿色块 :)

标签： htmlwordpresscss

Answer 1

使用 CSS Grid 的方法：

#holder {
  background: lightblue;
  padding: 10px 20px;
  display: grid;
  grid-template-columns: auto auto;
  /* define the height of the blocks */
  grid-template-rows: repeat(6, 50px);
  /* use grid-gap instead of margin */
  grid-gap: 18px 0;
}

.left-stuff {
  background: red;
  grid-column: 1;
}

.right-stuff {
  grid-row: 1 / -1;
  grid-column: 2;
  background: green;
  
  border-left: 2px solid blue;
}

<div id="holder">
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block left-stuff"></div>
  <div class="block right-stuff"></div>
</div>