将图像和文本放置在 div 的底部答案

【问题标题】：placing of image and text at the bottom of the div将图像和文本放置在 div 的底部
【发布时间】：2019-01-07 16:21:05
【问题描述】：

我需要在包含文本的 div 底部放置一个图像和文本。在关注了关于这个问题的各种帖子之后，我想出了这个Fiddle

HTML

<div class="container">
  <div class="row">

    <div id="col-lg-4" class="col-lg-4">
      <div class="cta-text">
        <h3>Heading text that Can span 2 or 3 lines</h3>
      </div>
      <p><strong>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web</strong></p>
      <div class="cta-text">
        <table>
          <tr>
            <td><img src="~/img/icon2.png" /></td>
            <td valign="middle">
              <a href="#">
                <p><strong>More Info!</strong></p>
              </a>
            </td>
          </tr>
        </table>

      </div>

    </div>
    <div class="col-lg-4">


      <div class="cta-text">
        <h3>Heading text that Can span 2 or 3 lines</h3>
      </div>
      <p><strong>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications.</strong></p>
      <div class="cta-text">
        <table>
          <tr>
            <td><img src="~/img/icon2.png" /></td>
            <td valign="middle">
              <a href="#">
                <p><strong>More Info!</strong></p>
              </a>
            </td>
          </tr>
        </table>

      </div>

    </div>
    <div class="col-lg-4">
      <div class="cta-text">
        <h3>Heading text that Can span 2 or 3 lines</h3>
      </div>
      <p><strong>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript.</strong></p>
      <div class="cta-text">
        <table>
          <tr>
            <td><img src="~/img/icon2.png" /></td>
            <td valign="middle">
              <a href="#">
                <p><strong>More Info!</strong></p>
              </a>
            </td>
          </tr>
        </table>

      </div>

    </div>
  </div>
</div>

CSS

   .col-lg-4 {
  width: 33.33333333%;
  height: 200px;
  position: relative;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.cta-text {
  margin-top: 10px;
  text-align: left;
}

p {
  margin: 10px;
  display: block;
}

table {
  background-color: transparent;
  position: absolute;
  bottom: 0;
}

.cta-text h3 {
  font-weight: 900;
  line-height: 1.1em;
  color: #d9232d;
}

但是，在浏览器上调整表格的绝对位置会使其与文本的其余部分重叠。请提出一种避免图像和上方文本重叠的方法，如果我可以更好地构建 HTML。

【问题讨论】：

标签： html css

【解决方案1】：

我已经更新了你的小提琴，所以你可以看到想要的结果。 Updated Fiddle。

我使用flex 实现了这一点。我还为具有固定高度的段落/文本添加了额外的容器，并且应该隐藏溢出。如果您可以使用 bootstrap4 进行尝试，这很容易；在这种情况下，您只需要设置段落/文本容器的高度即可。

【讨论】：

因为标题可以是单行或多行，所以有用的是使用额外的容器以及使用 Holzchopf 下面提到的方法，谢谢
解决方案在这两种情况下都有效，无论是多行标题还是单行，并且 UI 将保持响应。

【解决方案2】：

我解决了我的问题，将 div 用于我的文本，如上面@Azhar 所描述的那样隐藏了固定高度和溢出

  height: 150px;
  overflow: hidden;

还包括@Holzchopf 提到的方法

display: inline-grid;
grid-template-rows:6em auto auto;

Updated fiddle

【讨论】：

【解决方案3】：

您可以将您的 .col-lg-4 设为内联网格并将最后一行设置为固定高度，例如

display: inline-grid;
grid-template-rows: auto auto 4em;

然后你就可以摆脱绝对定位的表了。

【讨论】：

【解决方案4】：

您需要将 col-lg 填充移动到其中的一个新 div（在 col-lg 内）。加上另一个 div 在 col-lg 中，然后将填充物移到那里。
我认为对于这种情况（底部链接），如果您使用div 或span 而不是table 或td 会更容易。将其设置为display:inline; 或display:block;。你也可以用width: 100%;调整它

【讨论】：