CSS 文本环绕左对齐图像

Question

如果标题很长，我无法让以下 h2 标题环绕左对齐图像。它与短标题完美搭配。

问题是我在伪元素上添加的边框效果的定位问题

谁能帮我解决这个问题？

h2.sub-title {
  font-size: 28px;
  position: relative;
  display: inline-block;
}

h2.sub-title::before {
  position: absolute;
  height: 8px;
  width: 130px;
  left: 0;
  top: -10px;
  background: #441A6D;
  display: block;
  content: "";
}

.wp-post-image {
  float: left;
  margin: 0 15px 10px 0;
}

<div style="width: 800px"><img width="420" height="195" src="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="PIM" srcset="https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS.jpg 420w, https://heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2013/02/Fotolia_50400145_XS-300x139.jpg 300w"
    sizes="(max-width: 420px) 100vw, 420px">
  <h2 class="sub-title">Test long English title that isnt wrapping</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia porta velit, ornare lobortis tortor aliquam at. Vivamus tristique, nulla vitae tempus vehicula, ante arcu lobortis est, nec maximus nunc ipsum et nunc.</p>
  <p>Donec mattis vulputate tellus, vel tincidunt purus condimentum vel. </p>Cras vehicula, ex non varius faucibus, felis orci consectetur dui, vitae auctor lectus ex ornare ligula. Maecenas nec lectus turpis.
  <p>In varius ligula eu leo rhoncus fringilla. Nullam blandit iaculis cursus. Sed pulvinar sollicitudin rhoncus. </p>
  <p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
    enim.</p>
  <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
  <p>Pellentesque vulputate luctus ante non luctus. Integer tincidunt, tellus at maximus fermentum, lorem ante sagittis elit, in varius dui nulla et est. In hac habitasse platea dictumst. Integer eget nunc nec augue congue vestibulum. Vestibulum id libero
    enim.</p>
  <p>Etiam vulputate efficitur erat a viverra. Mauris eu malesuada lacus. Sed vestibulum est in velit euismod, quis porttitor velit rhoncus.</p>
</div>

Answer 1

在 h2.sub-title 中，您需要更改以下内容：

display: inline-block;

成为：

display: flex;

这是一个工作示例 - https://jsfiddle.net/bj3vcxzt/1/

Answer 2

h2.sub-title 的样式属性必须是 display: flex 或 display: block

CSS 文本环绕左对齐图像

CSS text wrapping around left aligned image

html

css

header

pseudo-element