【发布时间】：2015-03-26 16:54:43
【问题描述】：
我有这个布局
但是想要的输出是这样的
我尝试了很多东西，但到目前为止都没有奏效，包括 将父位置设置为相对位置，并将（最后一个）子位置设置为绝对位置并将其底部设置为 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。
【问题讨论】：
-
使用提供的 css 与您显示的 jsfiddle.net/t0cuev5r 不同
-
@Abzoozy：因为我也有引导程序。
-
我已经在外部资源jsfiddle.net/t0cuev5r/1下的js fiddle中添加了bootstrap css和js，无论如何检查zombyii解决方案
标签： html css twitter-bootstrap