我不知道如何对齐容器底部的最后一个<li>元素。我发现的问题是，由于column-count和column-fill，内容会自动适应列，阻止我根据需要定位最后一个元素。我尝试使用padding-top，margin-top和line-height但结果总是相同的。有没有办法解决这个问题？
下面是我的意思的一个例子：
* { font-family: Sans-serif }
.table1 { border: 1px solid red }
.table2 { border: 1px solid red }
.title-list { column-count: 2 }
.title-list li { margin-bottom: 10px }
.title,
.title:hover {
border-bottom: 1px solid #cae3f7;
text-decoration: none;
color: black
}
.more1 {
list-style-type: none;
margin-left: -15px
}
.more2 {
list-style-type: none;
margin-left: -15px;
padding-top: 30px
}<body>
<p><b>I want to align the last link at the bottom of the div</b></p>
<div class="table1">
<ol class="title-list">
<li><a class="title" href="#">I'm the first title</a></li>
<li><a class="title" href="#">I'm the second title</a></li>
<li><a class="title" href="#">I'm the third title</a></li>
<li><a class="title" href="#">I'm the fourth title</a></li>
<li><a class="title" href="#">I'm the fifth title</a></li>
<li><a class="title" href="#">I'm the sixth title</a></li>
<li><a class="title" href="#">I'm the seventh title</a></li>
<li><a class="title" href="#">I'm eighth title </a></li>
<li class="more1"><a href="#">Show me more >>></a></li>
</ol>
</div>
<p><b>But when I do this the columns change </b></p>
<div class="table2">
<ol class="title-list">
<li><a class="title" href="#">I'm the first title</a></li>
<li><a class="title" href="#">I'm the second title</a></li>
<li><a class="title" href="#">I'm the third title</a></li>
<li><a class="title" href="#">I'm the fourth title</a></li>
<li><a class="title" href="#">I'm the fifth title</a></li>
<li><a class="title" href="#">I'm the sixth title</a></li>
<li><a class="title" href="#">I'm the seventh title</a></li>
<li><a class="title" href="#">I'm the eighth title </a></li>
<li class="more2"><a href="#">Show me more >>></a></li>
</ol>
</div>
</body>/* the container */
.table-1 {
position: relative;
}
li:last-of-type {
position: absolute;
right: 0;
bottom: 0;
}