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>

我想得到这个结果：

棘手的部分是：＆＃34;更多＆＃34;按钮和文本块都需要垂直对齐到底部..我无法找到如何做到这一点（不使用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 Demo

Answer 3

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

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

bootstrap：垂直对齐底部/相同的列高度

3 个答案: