Question

给出以下标记和css：

<p>
   <img src="" width="80" height="200"/>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus
     ante in vehicula mollis. Praesent auctor pellentesque erat, et sagittis
     lorem lobortis sed. Nunc mollis pharetra massa, in dictum augue
     fermentum eget. Nulla facilisi. Phasellus aliquet velit in purus
     venenatis, eget tristique lacus eleifend. Proin eget magna mollis,
     venenatis eros eu, semper ante. Suspendisse potenti. Duis vel facilisis
     velit. Donec quis lacus commodo, consectetur tortor vel, venenatis
     nisl. Vestibulum ac nisl non purus consectetur sodales.
</p>

p {
    line-height: 4;
}

img {
    vertical-align: text-top;
}

img正确对齐文本的顶部，无论行高，但文本不会以自然的方式环绕img。

如果我将css更改为：

p {
    line-height: 4;
}

img {
    float: left;
    vertical-align: text-top;
}

文本换行，但img不再与文本顶部对齐。

有没有办法做到这一点，这将允许img保持与文本的顶部对齐，因为我改变行高而不需要我同时更改其他属性（例如负边距或其他这样的邪恶）？

这是一个jsfiddle：https://jsfiddle.net/5vk555nm/

Answer 1

它并不理想，因为它引入了一个语义上多余的额外父元素，但我有一个解决方案。 vertical-align：text-top将图像对齐到父元素的字体顶部。通过浮动img元素本身，上下文丢失;但是，如果img本身没有浮动但是在一个既浮动又具有相同行高的元素内部，它与该元素中（理论）字体的顶部对齐，因此您得到了所需的结果：

<style>
  p {
    line-height: 4;
  }

  span {
    float: left;
  }

  img {
    vertical-align: text-top;
  }
</style>
<p>
  <span><img src="" width="80" height="200"/></span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus
  ante in vehicula mollis. Praesent auctor pellentesque erat, et sagittis
  lorem lobortis sed. Nunc mollis pharetra massa, in dictum augue
  fermentum eget. Nulla facilisi. Phasellus aliquet velit in purus
  venenatis, eget tristique lacus eleifend. Proin eget magna mollis,
  venenatis eros eu, semper ante. Suspendisse potenti. Duis vel facilisis
  velit. Donec quis lacus commodo, consectetur tortor vel, venenatis
  nisl. Vestibulum ac nisl non purus consectetur sodales.
</p>

JSFiddle： https://jsfiddle.net/8urdcou0/

如何使用行高＆gt;将图像与某些文本的顶部对齐？ 1并允许文本环绕它？

1 个答案: