包装好的文字应与其上方的图片重叠

Question

我目前正致力于改进包含大量继承遗留代码的网页。出现的问题之一是在固定高度和宽度的容器中包装文本行，这个图像更好地解释了：

第一个图像是正常行为，如果文本足够短以适合一行，则会显示该图像。

第二个图像显示所需的行为：如果文本必须换行，容器应扩大并适当覆盖图像的下半部分。但是，它不重叠，因此第三个图像是结果行为。

删除固定宽度或固定高度的约束是不可行的，它会产生令人不快的不规则性。首先就是这种情况，所以我正试图解决这个问题。

我尝试使用z-index和position来解决这个问题，但即使是最轻微也无法让它工作。

由于长度而换行的一个例子。

.element {
  margin: 15px 7px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  color: #222;
  max-height: 523px;
  max-width: 300px;
}
.element img {
  vertical-align: top;
}
.element h2 {
  text-align: center;
  background: #333333;
  padding: 12px 0;
  font: 400 16px/22px 'Roboto Slab',serif;
  margin: 0;
  color: #fff;
  border-top: 1px solid #333333;
  text-transform: uppercase;
}
.element h2 a {
  color: #fff;
  text-decoration: none;
  font: 400 16px/22px 'Roboto Slab',serif;
}
.element span.view {
  display: block;
  text-align: center;
  background: #fff;
  padding: 12px 0;
  font: 400 16px/22px 'Roboto Slab',serif;
  margin: 0;
}
.element span.view a {
  text-decoration: none;
  color: #333333;
}
body {
  background: #111;
}

<div class="element" sort-id="1">
  <a href="index.cfm?sendung_id=518">
    <img src="http://startv.ch/demandit/files/M_75AB1CC4DCE0B2C5F31/dms//Image/CC_Talk_Auslaenderkriminalitaet.jpg" 
         alt="CC_Talk_Auslaenderkriminalitaet.jpg" border="0"> 
  </a>	

  <span class="lower-part-of-element">
    <h2>
      <a href="index.cfm?sendung_id=518">Adrian Amstutz &amp; Esther Egger-Wyss</a>
    </h2>

    <span class="view">
      <a href="index.cfm?sendung_id=518">Ausländerkriminalität</a>
    </span> 
  </span>
</div>

或Codepen.io。

Answer 1

如果你想解决这个问题，保持旧版HTML完好无损，那么最好的办法是绝对定位.element容器底部的.element { position: relative; margin: 15px 7px; padding-bottom: 5.75em; display: inline-block; overflow: hidden; position: relative; color: #222; max-height: 523px; max-width: 300px; } .element .lower-part-of-element { position: absolute; bottom: 0; left: 0; right: 0; } .element img { vertical-align: top; } .element h2 { text-align: center; background: #333333; padding: 12px 0; font: 400 16px/22px 'Roboto Slab',serif; margin: 0; color: #fff; border-top: 1px solid #333333; text-transform: uppercase; } .element h2 a { color: #fff; text-decoration: none; font: 400 16px/22px 'Roboto Slab',serif; } .element span.view { display: block; text-align: center; background: #fff; padding: 12px 0; font: 400 16px/22px 'Roboto Slab',serif; margin: 0; } .element span.view a { text-decoration: none; color: #333333; } body { background: #111; }。在后者上添加足够的填充底部以便“腾出空间”＃34;对于您希望适合图像的默认文本数量。

＆＃13;

＆＃13;

<div class="element" sort-id="1">
  <a href="index.cfm?sendung_id=518">
    <img src="http://startv.ch/demandit/files/M_75AB1CC4DCE0B2C5F31/dms//Image/CC_Talk_Auslaenderkriminalitaet.jpg" 
         alt="CC_Talk_Auslaenderkriminalitaet.jpg" border="0"> 
  </a>	

  <span class="lower-part-of-element">
    <h2>
      <a href="index.cfm?sendung_id=518">Adrian Amstutz &amp; Esther Egger-Wyss</a>
    </h2>

    <span class="view">
      <a href="index.cfm?sendung_id=518">blah blah blubb</a>
    </span> 
  </span>
</div>

<div class="element" sort-id="1">
  <a href="index.cfm?sendung_id=518">
    <img src="http://startv.ch/demandit/files/M_75AB1CC4DCE0B2C5F31/dms//Image/CC_Talk_Auslaenderkriminalitaet.jpg" 
         alt="CC_Talk_Auslaenderkriminalitaet.jpg" border="0"> 
  </a>	

  <span class="lower-part-of-element">
    <h2>
      <a href="index.cfm?sendung_id=518">Foo Bar</a>
    </h2>

    <span class="view">
      <a href="index.cfm?sendung_id=518">blah blah blubb</a>
    </span> 
  </span>
</div>

＆＃13;

Schedule.where("#{time_end} - #{time_start} > 4.hours")

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你要找的吗？

.lower-part-of-element {
    position: absolute;
    bottom: 0;
}

https://codepen.io/anon/pen/wrQwXY

另请注意，您应将span更改为div。