在長個兒的UI元素如何在底部

Question

二元我有一個簡單的ul元素具有較大的高度，我想在ul元素的底部最後兩個li元素和休息之上。

你可以看到當前的實現here。

代碼是這樣的：

.my-ul { 
 
    height: 90vh; 
 
    width: 40%; 
 
    background-color: grey; 
 
}

<div id="demo"> 
 
    <ul class="my-ul"> 
 
    <li>First Element</li> 
 
    <li>Second Element</li> 
 
    <li>Third Element</li> 
 
    <li>Fourth Element</li> 
 
    <li>Fifth Element</li> 
 
    </ul> 
 
</div>

我試圖從here和here解決方案，但這些都是not working。

Answer 1

解決方案我在這裏看到的是Flexbox的

ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 300px; 
 
    justify-content: flex-start; 
 
} 
 

 
ul li:nth-last-child(2) { 
 
    margin-top: auto; 
 
}

<ul> 
 
    <li>first</li> 
 
    <li>first</li> 
 
    <li>first</li> 
 
    <li>first</li> 
 
    <li>first</li> 
 
    <li>first</li> 
 
</ul>

Answer 2

使用CSS選擇器的最後兩Elements.See下面的示例代碼：

<div id="demo"> 
    <ul class="my-ul"> 
    <li>First Element</li> 
    <li>Second Element</li> 
    <li>Third Element</li> 
    <li>Fourth Element</li> 
    <li>Fifth Element</li> 
    </ul> 
</div> 

.my-ul { 
    height: 90vh; 
    width: 40%; 
    background-color: grey; 
} 
li:last-child { 
    position: fixed; 
    top: 370px; 
} 
li:nth-child(4) { 
    position: fixed; 
    top: 350px; 
}