Question

我需要在包含文本的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，请提出一种避免图像与上方文本重叠的方法。

Answer 1

我已经更新了您的小提琴，以便您可以看到期望的结果。 Updated Fiddle。

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

Answer 2

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

  height: 150px;
  overflow: hidden;

还包括@Holzchopf提到的方法

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

Updated fiddle

Answer 3

您可以将 .col-lg-4 设置为嵌入式网格，然后将最后一行设置为固定高度，例如

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

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

Answer 4

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

将图片和文字放在div的底部

4 个答案: