我試著做一些感覺應該不難的事情,但是我很難找到合適的。
本質上,我有一個項目列表,但我不知道我會收到多少。我想將它們顯示在兩列中,垂直排序(也就是說,第一列包含列表的前半部分)。
如果我的列表是這樣的:
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
然后我想實現這樣的布局:
a | e
| b | f
| c | g
| d
因為項目的數量是未知的,我不能在清單上設定一個固定的高度。
使用column-count使我非常接近,但有一個問題:如果任何列表項中的文本換行到第二行,對齊就會中斷。不幸的是,我無法控制每個列表項中的文本長度,有時還會換行。
我還嘗試了各種使用display:grid的方法,但都沒有成功。