代码之家 › 专栏 › 技术社区 › Adowrath Veebs

换行的文本应与上面的图像重叠

css html

Adowrath Veebs · 技术社区 · 8 年前

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

第一个图像是正常行为,如果文本足够短,可以放在一行中,则显示第一个图像。

第二个图像显示 渴望的 行为:如果文本必须换行,则容器的大小应扩大,并适当覆盖图像的下部。但是,它不重叠,因此第三个图像是结果行为。

我试着用 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 .

2 回复 | 直到 8 年前

C3roe 8 年前

如果您想解决这个问题,保持遗留HTML的完整性,那么最好的选择就是绝对定位 .lower-part-of-element .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;
}

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

Lorenzo Marcon 8 年前

这就是你要找的吗?

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

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

请注意,您应该更改 span div