引导程序：垂直对齐到底部/相同的列高

Question

这是我的标记：

<div class="row partner">
    <div class="col-md-2 col-xs-2"><img src="/images/foo.jpg" class="img-responsive"></div>
    <div class="col-md-8 col-xs-8">
        <span class="name">Foo Item</span>Lorem ipsum dolor sit amet, consetetur sadipscing
            elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
            vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
            Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
            tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        <a href="/details.php?id=11475">More<span></span></a></div>
    <div class="col-md-2 col-xs-2">
        <div class="price">Text</div>
    </div>
</div>

我想得到这个结果：

棘手的部分是：“更多”按钮和文本块都需要垂直对齐底部。.我找不到方法（不使用jquery）有什么想法？

Answer 1

您应该能够使用position:absolute ..

.bottom {
  position:absolute;
  bottom:0;
}

http://www.bootply.com/4qREQQiNcD

Answer 2

Flexbox可以做到这一点。

 .partner { display: flex; border:1px solid grey; } .partner > .vert { display: flex; flex-direction: column; } .partner > .vert .more { margin: 1em; margin-top: auto; padding: .5em; background: red; align-self: flex-end } .partner > .vert .price { margin: 1em; margin-top: auto; padding: .5em; background: lightgrey; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="row partner"> <div class="col-md-2 col-xs-2"><img src="http://www.fillmurray.com/140/200" class="img-responsive"></div> <div class="col-md-8 col-xs-8 vert"> <span class="name">Foo Item</span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a class="more" href="/details.php?id=11475">More<span></span></a></div> <div class="col-md-2 col-xs-2 vert"> <div class="price">Text</div> </div> </div> 

Codepen演示

Answer 3

将pull-right css类添加到更多链接，并将bottom-align-text到right文本块，如下所示：

<div class="row partner">
    <div class="col-md-2 col-xs-2"><img src="/images/foo.jpg" class="img-responsive"></div>
    <div class="col-md-8 col-xs-8">
        <span class="name">Foo Item</span>
        Lorem ipsum dolor sit amet, consetetur sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
        vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
        Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        <a href="/details.php?id=11475" class="pull-right">More<span></span></a>
    </div>
    <div class="col-md-2 col-xs-2 bottom-align-text">
        <div class="price">Text</div>
    </div>
</div>

也和CSS：

<style>
    @media (min-width: 768px ) {
      .row {
          position: relative;
      }
      .bottom-align-text {
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
 </style>