<div 靠下>是一種HTML和CSS的技巧，可以將一個元素定位到頁面的底部或者相對于其他元素的底部。這對于需要布局的網頁非常有用，尤其是在需要固定某個元素在頁面底部或容器底部的情況下。在接下來的幾個案例中，我將詳細說明如何使用<div 靠下>來實現不同的布局效果。
案例一：將元素固定在頁面底部 <div 靠下>可以幫助我們輕松實現將一個元素固定在頁面底部的效果。例如，我們可以將一個導航菜單放置在頁面的底部，并且保持在頁面滾動時始終可見。
HTML代碼如下：

<p><div class="footer-container"></p>
<p><ul class="navigation-menu"></p>
<p><li>首頁</li></p>
<p><li>關于我們</li></p>
<p><li>產品</li></p>
<p></ul></p>
<p></div></p>

CSS代碼如下：

<p>.footer-container {</p>
<p>  display: flex;</p>
<p>  position: fixed;</p>
<p>  bottom: 0;</p>
<p>  width: 100%;</p>
<p>  background-color: #f2f2f2;</p>
<p>  padding: 20px 0;</p>
<p>}</p>

在上述例子中，我們使用了flexbox布局，將導航菜單水平排列。通過設置position為fixed，bottom為0，我們將<div>元素定位到了頁面底部。這樣，無論用戶如何滾動頁面，導航菜單始終可見。
案例二：相對于其他元素靠下 有時候，我們希望一個元素相對于其他元素的底部進行定位。使用<div 靠下>，我們可以很容易地實現這樣的布局效果。
HTML代碼如下：

<p><div class="container"></p>
<p>  <h1>網頁標題</h1></p>
<p>  <div class="content"></p>
<p>    <p>這里是頁面內容。</p></p>
<p>  </div></p>
<p>  <div class="footer"></p>
<p>    <p>版權信息</p></p>
<p>  </div></p>
<p></div></p>

CSS代碼如下：

<p>.container {</p>
<p>  display: flex;</p>
<p>  flex-direction: column;</p>
<p>  height: 100vh;</p>
<p>}</p>
<p>.content {</p>
<p>  flex-grow: 1;</p>
<p>}</p>
<p>.footer {</p>
<p>  align-self: flex-end;</p>
<p>  background-color: #e8e8e8;</p>
<p>  padding: 20px;</p>
<p>}</p>

在上面的例子中，我們使用了flexbox布局，將.container內的元素垂直排列。通過設置.content的flex-grow屬性為1，我們使其占據頁面剩余的空間。而.footer元素使用align-self屬性設置為flex-end，將其相對于.container底部對齊。
： 通過使用<div 靠下>，我們可以輕松實現將元素固定在頁面底部或相對于其他元素底部的效果。這對于網頁布局來說非常有用，可以幫助我們創建各種獨特和吸引人的設計。以上是一些簡單的案例，你可以根據自己的需求進行擴展和調整，發揮創意，創造出更多驚艷的布局效果。