为何文本未与图片并排？inline元素布局疑问求解

我原本认为<img>和<span>都属于inline元素，应当并排显示，但在示例中并未实现该效果。以下是我的代码和效果：

我的HTML代码 #

<body>
  <div class="container">
    <img src="https://www.w3schools.com/w3images/mac.jpg" alt="Mountain landscape">
    <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci aliquid, non cumque, eveniet atque et
      suscipit quisquam libero saepe fugiat vero qui nulla labore tempore nostrum? Quisquam quibusdam illo
      tempora!</span>
  </div>
</body>

我的CSS代码 #

p {
    font-size: 20px;
}
img {
    width: 300px;
}

效果截图 #

核心原理拆解 #

1. inline元素分两类，布局特性不一样 #

inline元素不是统一的布局逻辑，主要分两种：

• 替换元素：比如<img>、<input>，这类元素的内容是外部资源（图片、控件），尺寸可以通过CSS固定。它们不会独占一行，但会像小方块一样占据固定的宽高空间。
• 非替换元素：比如<span>、<a>，内容是纯文本，尺寸由文本长度和样式决定，默认宽度随文本变化，高度由行高控制。

2. inline元素的换行规则：空间不够就换行 #

inline元素默认在一行排列，但有个关键前提——当前行的剩余可用宽度能容纳后续元素的内容。如果空间不足，浏览器会自动触发换行：

• 要是浏览器窗口宽度（也就是.container的默认宽度，因为div是块级元素，默认占满父元素宽度）小于<img>的300px加上<span>文本的最小宽度，<span>根本挤不进img旁边，只能直接换行到下方。
• 就算窗口宽度足够，要是<span>文本太长，剩余空间装不下全部文本，文本会先在img右侧排列，排不下的部分就会换行到img下方，看起来就像span和img没并排。

3. 你的代码里的具体问题 #

你给<img>设置了300px的固定宽度，而<span>里的文本又较长，一旦窗口宽度不足，或者剩余空间装不下全部文本，就会触发换行，导致两者无法完全并排。

让它们稳定并排的解决方法 #

方法1：给容器设置足够宽度 #

确保.container的宽度能容纳img和span的总宽度，比如：

.container {
  width: 800px; /* 根据实际文本长度调整 */
}

方法2：用flex布局最省心 #

给容器添加flex布局，直接强制子元素在一行排列，还能控制垂直对齐：

.container {
  display: flex;
  align-items: center; /* 让img和span垂直居中，可选 */
}

方法3：强制文本不换行 #

给<span>设置禁止换行，同时让容器宽度自适应内容：

span {
  white-space: nowrap; /* 禁止文本换行 */
}
.container {
  width: fit-content; /* 容器宽度随内容自动调整 */
}

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