html - 如何对齐div末尾的最后一个 "li"元素？

Question

我有这个布局

但期望的输出是这样的

我尝试了很多东西，但到目前为止都没有奏效，包括将父位置设置为相对位置，并将(最后一个)子位置设置为绝对位置并将其底部设置为 0，但这也不起作用。阅读页面布局后，这不起作用的原因就会很清楚。

html

<section class="header-content">
    <div class="row no-margin">
        <div class="col-md-3 Head1">
            <h5>
                <a href="Head1.html">
                    Head 1</a></h5>
            <div>
                <ul>
                    <li><a href="Head1.html#detail1" class="top_header_links_white">Detail 1</a></li>
                    <li><a href="Head1.html#detail2" class="top_header_links_white">Detail 2</a></li>
                    <li><a href="Head1.html">
                        <img src="@Url.Content("~/images/bg_images/view_more.png")" alt="view all details" /></a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-3 Head2">
            <h5>
                <a href="Head2.html">
                    Head 2</h5>
            <div>
                <ul>
                    <li><a href="Head2.html#detail1" class="top_header_links_white">Detail 1</a></li>
                    <li><a href="Head2.html#detail2" class="top_header_links_white">Detail 2</a></li>
                    <li><a href="Head2.html#detail3" class="top_header_links_white">Detail 3</a></li>
                    <li><a href="Head2.html#detail4" class="top_header_links_white">Detail 4</a></li>
                   <li><a href="Head2.html">
                        <img src="@Url.Content("~/images/bg_images/view_more.png")" alt="view all details" /></a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-3 Head3">
             <h5>
                <a href="Head3.html">
                    Head 3</h5>
            <div>
                <ul>
                    <li><a href="Head3.html#detail1" class="top_header_links_white">Detail 1</a></li>
                   <li><a href="Head3.html">
                        <img src="@Url.Content("~/images/bg_images/view_more.png")" alt="view all details" /></a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-3 Head4">
            <h5>
                <a href="Head4.html">
                    Head 4</h5>
            <div>
                <ul>
                    <li><a href="Head4.html#detail1" class="top_header_links_white">Detail 1</a></li>
                    <li><a href="Head4.html#detail2" class="top_header_links_white">Detail 2</a></li>
                    <li><a href="Head4.html#detail3" class="top_header_links_white">Detail 3</a></li>
                    <li><a href="Head4.html#detail4" class="top_header_links_white">Detail 4</a></li>
                    <li><a href="Head4.html#detail5" class="top_header_links_white">Detail 5</a></li>
                    <li><a href="Head4.html#detail6" class="top_header_links_white">Detail 6</a></li>
                   <li><a href="Head4.html">
                        <img src="@Url.Content("~/images/bg_images/view_more.png")" alt="view all details" /></a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

CSS

.header-content
{
    overflow: hidden;
    margin-top: 2px;
    margin-bottom: 1%;
}
.header-content div div
{
    padding-bottom: 999px;
    margin-bottom: -999px;
}
.header-content ul
{
    list-style: none;
    padding: 0;
}

第二个css是填充div的总高度作为容器，以防item少。任何帮助表示赞赏。

更新
将最后一个子项的底部设置为 0，同时将其位置设置为绝对位置，并将容器的位置设置为相对位置不起作用，因为 css 的第二部分。我已经包括在内，以便在元素较少的情况下使容器占据整个高度。但是当我这样做时，它会将最后一个 li 设置得非常低，因为 bottom 是 0，但 padding 是 999。请阅读并在回答之前理解 css。

Answer 1

.header-content {
  overflow: hidden;
  margin-top: 2px;
  margin-bottom: 1%;
}
.header-content ul {
  list-style: none;
  padding: 0;
}
.col-md-3 {
  width: 200px;
  height: 400px;
  float: left;
  border: 2px solid black;
  position: relative;
}
ul li:last-child img {
  position: absolute;
  bottom: 10px;
}

<section class="header-content">
  <div class="row no-margin">
    <div class="col-md-3 Head1">
      <h5>
                <a href="Head1.html">
                    Head 1</a></h5>
      <div>
        <ul>
          <li><a href="Head1.html#detail1" class="top_header_links_white">Detail 1</a>
          </li>
          <li><a href="Head1.html#detail2" class="top_header_links_white">Detail 2</a>
          </li>
          <li>
            <a href="Head1.html">
              <img src="@Url.Content(" ~/images/bg_images/view_more.png ")" alt="view all details" />
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-3 Head2">
      <h5>
                <a href="Head2.html">
                    Head 2</h5>
      <div>
        <ul>
          <li><a href="Head2.html#detail1" class="top_header_links_white">Detail 1</a>
          </li>
          <li><a href="Head2.html#detail2" class="top_header_links_white">Detail 2</a>
          </li>
          <li><a href="Head2.html#detail3" class="top_header_links_white">Detail 3</a>
          </li>
          <li><a href="Head2.html#detail4" class="top_header_links_white">Detail 4</a>
          </li>
          <li>
            <a href="Head2.html">
              <img src="@Url.Content(" ~/images/bg_images/view_more.png ")" alt="view all details" />
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-3 Head3">
      <h5>
                <a href="Head3.html">
                    Head 3</h5>
      <div>
        <ul>
          <li><a href="Head3.html#detail1" class="top_header_links_white">Detail 1</a>
          </li>
          <li>
            <a href="Head3.html">
              <img src="@Url.Content(" ~/images/bg_images/view_more.png ")" alt="view all details" />
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="col-md-3 Head4">
      <h5>
                <a href="Head4.html">
                    Head 4</h5>
      <div>
        <ul>
          <li><a href="Head4.html#detail1" class="top_header_links_white">Detail 1</a>
          </li>
          <li><a href="Head4.html#detail2" class="top_header_links_white">Detail 2</a>
          </li>
          <li><a href="Head4.html#detail3" class="top_header_links_white">Detail 3</a>
          </li>
          <li><a href="Head4.html#detail4" class="top_header_links_white">Detail 4</a>
          </li>
          <li><a href="Head4.html#detail5" class="top_header_links_white">Detail 5</a>
          </li>
          <li><a href="Head4.html#detail6" class="top_header_links_white">Detail 6</a>
          </li>
          <li>
            <a href="Head4.html">
              <img src="@Url.Content(" ~/images/bg_images/view_more.png ")" alt="view all details" />
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>