Question

尝试在每个div底部的3个相等高度Div的底部浮动一个段落。我有3个div相同的高度，但不确定如何将最后一个段落放在底部（它将是每个按钮，我希望它们排成一行）。

3个div都响应，所以无论div的宽度/高度如何，最后一段都需要在底部。

#one-true { overflow: hidden; }
#one-true .col {
  width: 27%;
  padding: 30px 3.15% 0;
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}
#one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; }
#one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; }
#one-true .col:nth-child(3) { left: 0; background: #eee; }
p.button {
    text-align:center;}
}

<div id="one-true" class="group">
  <div class="col">
      <h3>I am listed first in source order.</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <p class="button"><a href="http://jsfiddle.net" target="_blank">Click here</a></p>
    </div>
  <div class="col">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      <p class="button"><a href="http://jsfiddle.net" target="_blank">Click here</a></p>
    </div>
  <div class="col">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <p class="button"><a href="http://jsfiddle.net" target="_blank">Click here</a></p>
    </div>
</div>

谢谢！

Answer 1

这是一种使用flexbox的完全不同的方法。

在下面的示例中，order属性用于重新排序元素，flex-basis: 100%用于使子.col元素具有相同的宽度，{{1} }用于使flex-grow: 1元素扩展到剩余高度，以便p元素始终位于底部。

Updated Example

＆＃13;

p.button

＆＃13;

#one-true {
    display: flex;
}

#one-true .col {
    padding: 30px 3.15% 0;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
}

#one-true .col:nth-child(1) { background: #ccc; order: 2; }
#one-true .col:nth-child(2) { background: #eee; order: 1; }
#one-true .col:nth-child(3) { background: #eee; order: 3; }

#one-true .col p:not(.button) {
    flex-grow: 1;
}

p.button {
    text-align:center;
}

＆＃13;

Answer 2

您可以将.col div设置为position:relative，然后将每个p设置为position:absolute; bottom:0，但这需要您通过其他方法（嵌套div或table-cell）将它们设置为相同的高度，因为您的current方法意味着bottom:0将段落放在视图下方十万个像素。

浮动段落在相同高度的底部div

2 个答案: