html - 环绕的文字应该与上面的图像重叠

Question

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

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

第二张图片显示了期望的行为:如果文本必须换行，容器应该扩大尺寸并适本地覆盖图片的下半部分。但是，它不重叠，因此第三张图片是结果行为。

放弃固定宽度或固定高度的约束是不可行的，它会产生令人不快的不规则性。一开始就是这种情况，所以我正在努力解决这个问题。

我已经尝试使用 z-index 和 positioning 来解决它，但即使是最轻微的也无法让它工作。

---

由于长度而回绕的线条示例。

.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 完好无损，那么你最好的选择是绝对定位 .lower-part-of-element从 .element 的底部开始容器。在后者上添加足够的 padding-bottom 以“腾出空间”用于您希望在图像下方容纳的默认文本量。

.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;
}

<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>