Question

我整天坐在那里试图击败这件事。看起来很幼稚，但是我似乎撞墙了。这些是条件：

两列
按列顺序阅读
垂直对齐顶部
每个项目都有一个边框顶部和一个边框底部
所选项目的边框颜色不同
内容，行数和高度未知；它可以是3个项目，可以是17个项目
一个div 包含所有项目，而不是两个
没有JS，没有jQuery

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

我的目标：

---------  ---------
Item 1     Item 5
---------  ---------
Item 2     Item 6
---------  ---------
Item 3     Item 7
---------  ---------
Item 4
---------

这就是我得到的：https://codepen.io/martinlex/pen/bZgmvV?editors=1100

我的问题：

除了顶部和底部，我到处都有双边框。边框宽度在任何地方都必须为1px。
列的解决方案：边框从顶部和底部随机消失。
网格解决方案：当自动流为列时，您需要知道确切的行数。
flexbox可以处理吗？

Answer 1

无论何时使用列表，默认情况下，li个项目之间总会有一定的空白。您的解决方案与网格完美配合，只需在margin: -0.5px类中添加.item即可删除默认边距。

.list {
  display: grid;
  grid-column-gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
}

.item {
  border-bottom: 1px solid lightgrey;
  border-top: 1px solid lightgrey;
  padding: 8px;
  margin: -0.5px;
  list-style: none;
}

.selected {
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  z-index: 1;
}

<ul class="list">
  <li class="item">Asdfghjkl 1</li>
  <li class="item">Asdfghjkl 2</li>
  <li class="item">Asdfghjkl 3</li>
  <li class="item">Asdfghjkl 4</li>
  <li class="item">Asdfghjkl 5</li>
  <li class="item">Asdfghjkl 6</li>
  <li class="item selected">Asdfghjkl 7</li>
  <li class="item selected">Asdfghjkl 8</li>
  <li class="item">Asdfghjkl 9</li>
  <li class="item">Asdfghjkl 10</li>
  <li class="item">Asdfghjkl 11</li>
  <li class="item selected">Asdfghjkl 12</li>
  <li class="item">Asdfghjkl 13</li>
</ul>

Answer 2

更新1：这是Flexbox解决方案的屏幕截图： https://pasteboard.co/I4hDGRM.png

display: flex;
flex-direction: column;
flex-flow: column wrap;
height: 340px; /* NEEDS HEIGHT */

这正是我想要的。但是：该列表需要一个height值。我没有，内容会有所不同。

Answer 3

更新2：这是Css网格解决方案的屏幕截图：https://pasteboard.co/I4hKqRb.png

display: grid;
grid-column-gap: 16px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, auto); /* CANNOT SET 7 AS A MAGIC NUMBER */
grid-auto-flow: column;

这又是我想要的。但出于与上述相同的原因，它需要一个grid-template-rows值，但我没有。

具有动态内容的按列顺序排列的列，高度相等

3 个答案: