如何对齐div末尾的最后一个“li”元素？

时间：2015-03-26 08:30:04

标签： html css html5 css3 twitter-bootstrap

我有这个布局current output

但是所需的输出就是这个

Desired output

我已经尝试了很多东西，但到目前为止它们都没有，包括 设置父位置相对，并将（最后）子位置设置为绝对位置并将其底部设置为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的总高度填入容器中，以防项目数量减少。任何帮助表示赞赏。

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

2 个答案:

答案 0 :(得分：0)

.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>

答案 1 :(得分：-1)

将此添加到您的CSS 

.header-content ul { position: relative; height: 100%; }
.header-content ul li:last-child { position: absolute; bottom: 0; }
相关问题
最新问题