如何在不更改HTML的情况下将单个UL拆分为两列布局？
如何在不更改HTML的情况下将单个UL拆分为两列布局？
提问于 2018-06-01 06:18:53
我有来自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得到的结果是：
我需要完成的是：
是否可以使用flexbox或子菜单上的其他功能？
编辑:我已经编写了一个代码，这样更容易理解- https://codepen.io/anon/pen/ZRGxNE我需要右边的绿色块:)
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-01 06:25:37
一种使用CSS网格的方法：
#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50633579
复制相关文章
相似问题