Question

我有一个使用Bootstrap 3的应用程序。有一个由两个主要列组成的网格。左列中的内容左对齐。在右栏中，我希望内容右对齐。但是，某些内容需要与顶部垂直对齐。而其他内容需要垂直对齐底部。它看起来像这样：

 col-sm-9                             col-sm-3
+------------------------------------+------------+
| Content will go                    |     [image]|
| here. The size of this content     |            |
| takes precedence. It could go      |            |
| four lines. Or maybe even six.     |  link here |
+------------------------------------+------------+

为了做到这一点，我有以下内容：

<div class="row" style="display:table">
  <div class="col-sm-9" style="float:none; display:table-cell;">
    Some text goes here
  </div>
  <div class="col-sm-3" style="float:none; display:table-cell; text-align:right;">
    <div><img alt="My Image" src="..." /></div>
    <div style="vertical-align:bottom;"><a href="#">link here</a></div>
  </div>
</div>

出于某种原因，这种方法不起作用。我不确定我做错了什么。我做错了什么？

Answer 1

我假设修复你的问题只是给链接div绝对定位并将其位置设置为bottom：0px;和右：0px;

<div class="row" style="display:table">
  <div class="col-sm-9" id="l-cell">
      Text here
  </div>
  <div class="col-sm-3" id="r-cell">
    <div><img alt="My Image" src="..." /></div>
    <div id="bottom-left"><a href="#">link here</a></div>
  </div>
</div>

使用css：

#l-cell {
    float:none; display:table-cell; background-color:red;
}
#r-cell {
    float:none; display:table-cell; text-align:right; background-color:blue;
}
#bottom-left {
    vertical-align:bottom; position:absolute; bottom:0px; right:0px; background-color:white;
}

示例：JSfiddle

在Bootstrap

1 个答案: