Question

我目前正在开发一个涉及[3 x n]无序列表的项目，并尝试在每个列表条目的底部放置一个链接。问题是每个列表条目的高度对内容是动态的，如codepen所示。我如何设置这个样式，以便所有链接都显示为对齐？

来源：

<body class="container-fluid">
  <ul class="row-fluid">
    <li class="span4">
      <h1> Column 1 </h1>
      <p>Lorem ipsum ... laborum.</p>
      <a href="">Some Link</a>
    </li>
    <li class="span4">
      <h1> Column 2 </h1>
      <p>Lorem ipsum ... consequat.</p>
      <a href="">Some Link</a>
    </li>
    <li class="span4">
      <h1> Column 3 </h1>
      <p>Lorem ipsum ... pariatur. </p>
      <a href="">Some Link</a>
    </li>
  </ul>

  <!-- More similar ul's -->
</body>

Answer 1

http://codepen.io/anon/pen/kDCwz

ul {
  position:relative;
  padding-bottom:20px;
}
a {
  position:absolute;
  bottom:0px;
}

Answer 2

你也可以通过一些javascript来设置元素的高度。

这是一个例子。只要每个li中有一个“p”元素，这段代码就可以工作。另外，我给你的'ul'一个id：'columns'。

var maxHeight = 0;

//Get all the 'p' elements in each column
var elem = document.getElementById('columns');
var pElems = elem.getElementsByTagName('p');

// Find out which p element is the tallest
for (var i = 0; i < pElems.length; i++) {
  if( pElems[i].offsetHeight > maxHeight ) {
    maxHeight = pElems[i].offsetHeight;
  }
}

// Set all the elements to the height of the tallest element
for (var i = 0; i < pElems.length; i++) {
  pElems[i].style.height = maxHeight+"px";
}

这是一个codepen：http://codepen.io/anon/pen/gCGpv

使用Bootstrap将元素静态放置在span元素的底部

2 个答案: