Question

所以，让我说我有以下内容：

  <div class="row-fluid container">
    <div class="span2">
      <image of height 100px>
    </div>
    <div class="span10 inner"> 
      <span class="title">some title</span>
    </div>
  </div>

如何设置此样式以使标题在span10 div的底部对齐？

更新

请提供一个答案，以保持Bootstrap的响应行为不变。谢谢！

Answer 1

以下是您需要的款式。

.move-down2 {
    height: 200px;
    border: 1px solid black;
    position: relative;
}

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

http://jsfiddle.net/nadeeth/6vmu0s6x/

Answer 2

易：

.inner {
  display:table-cell;
  vertical-align:bottom;
}

http://jsfiddle.net/xoetoduj/

Answer 3

根据您的具体情况，制作主div display:table;和子div [{1}}然后使用display:table-cell;或vertical-align:baseline;。

这通常有助于垂直对齐问题，而不能使用行高。

如果所有图像都是100px，则可以使用以下方法进行不同的处理。我给div做了颜色来说明。

vertical-align:bottom;

Answer 4

我们可以在CSS中使用vertical align属性来获得底部

http://jsfiddle.net/jai17/a7n89zcq/

HTML：

<div class="row-fluid move-down">
    <div class="span2">
      <image of height 100px>
    </div>
    <div class="span10 move-down2"> 
      <span class="title">some title</span>
    </div>
  </div>

CSS：

.move-down2 {
    border: 1px solid #000000;
    height: 200px;
}
.title {
    bottom: 0;
    display: table-cell;
    height: 200px;
    vertical-align: bottom;
}

将文本（底部）与Bootstrap 2.3.2垂直对齐

4 个答案: