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

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

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>

然而，在浏览器上调整表的绝对位置会使其和其余文本重叠。如果我能更好地构建HTML，请建议一种避免图像和上面文本重叠的方法。

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

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

然后你可以去掉绝对定位表。

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

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

然后你可以去掉绝对定位表

您需要将col lg衬垫移动到其内部的新div（col lg内部）。再加一个

div

在col lg内，然后将填充物移到那里

我认为对于这种情况（底部链接），如果使用

div

或

span

而不是

table

或

td

，会更容易。将其设置为

display:inline或<代码>显示：块。您还可以使用
宽度：100%进行调整

您需要将col lg衬垫移动到其内部的新div（col lg内部）。再加一个

div

在col lg内，然后将填充物移到那里

我认为对于这种情况（底部链接），如果使用

div

或

span

而不是

table

或

td

，会更容易。将其设置为

display:inline或<代码>显示：块。您还可以使用
宽度：100%进行调整

---

我已经更新了你的小提琴，这样你就可以看到渴望的结果了。 .

---

我使用

flex

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

我已更新了您的小提琴，以便您可以看到所需的结果。 .

---

我使用

flex

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

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

  height: 150px;
  overflow: hidden;

还包括@Holzchopf提到的方法

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

---

我解决了我的问题，如上面@Azhar所述，我使用div作为固定高度和隐藏溢出的文本

  height: 150px;
  overflow: hidden;

还包括@Holzchopf提到的方法

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

---

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