SVG图片与多行<h1>文本左侧内联对齐实现问题咨询

核心问题 #

1. HTML结构不合法：<p> 标签属于段落行内容器，规范不允许嵌套 <div> 这类块级元素，浏览器解析时会自动提前闭合 <p> 标签，你写的嵌套结构会被拆分为独立元素，布局逻辑完全失效。
2. 混用 inline-grid、float、flex 多种布局属性，属性冲突也会导致布局异常。

推荐解决方案（Flex布局，无浮动塌陷问题） #

用Flex布局实现逻辑更清晰，天然适配多行文本场景，不需要处理浮动带来的副作用：

.company-content {
    width: 79%;
}
.title-wrap {
    display: flex;
    gap: 0.8rem; /* 可自行调整图片和文本的间距 */
    align-items: flex-start; /* 图片和第一行文本顶部对齐，需要垂直居中改为center即可 */
}
.title-wrap img {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0; /* 防止图片被挤压变形 */
}
.title-wrap h1 {
    margin: 0; /* 清除h1默认外边距，可根据需求自行调整 */
}

<div class="company-content">
  <div class="title-wrap">
    <img src="graphics/filenamehere.svg" alt="logo">
    <h1>Lorem Ipsum Text here 多行文本也能正常排布 多行文本也能正常排布 多行文本也能正常排布</h1>
  </div>
</div>

浮动方案修复 #

如果你要沿用浮动的实现思路，只需要把原代码里非法嵌套的 <p> 标签替换为 <div> 即可：

<div class=company-content>
  <div>
    <img src="https://picsum.photos/500" style="float:left; width:3rem; height:3rem; margin-right:0.8rem;" />
    <h1>Lorem Ipsum blablabla bla bla bla bla 多行文本也能正常排布</h1>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Munchkin