W3.CSS布局问题：如何将文本块调整至与图片同一行显示

示例代码中的图片默认设置了width:100%，会独占一整行宽度，包裹「TITLE HEADING」文本的容器是块级元素，默认会排列到图片下方，因此二者无法处在同一行。

当前代码已经引入了W3CSS框架，直接使用框架自带的栅格类改动最小，也能自动适配不同屏幕尺寸：

• 新增一个w3-row容器，把图片和标题文本块都包裹在这个容器内，作为同排行的父容器
• 给图片外层套一个带w3-col宽度类的容器，比如要让图片占左侧40%宽度，就添加w3-col s4 m4 l4类，同时给容器加内边距避免内容贴边
• 给包裹标题的容器添加对应剩余宽度的w3-col类，比如占右侧60%宽度就加w3-col s8 m8 l8，保留原有的w3-container类即可
• 图片保留width:100%的样式让它适配所在列的宽度，额外加display:block避免图片下方出现默认缝隙

修改后的核心代码片段 #

只需要调整博客卡片内图片和标题部分的结构，正文内容不需要改动：

<div class="w3-card-4 w3-margin w3-white">
  <!-- 同排行容器 -->
  <div class="w3-row">
    <!-- 左侧图片列 -->
    <div class="w3-col s4 m4 l4 w3-padding">
      <img src="/w3images/woods.jpg" alt="Nature" style="width:100%;display:block">
    </div>
    <!-- 右侧标题列 -->
    <div class="w3-col s8 m8 l8 w3-container">
      <h3><b>TITLE HEADING</b></h3>
      <h5>Title description, <span class="w3-opacity">April 7, 2014</span></h5>
    </div>
  </div>
  <!-- 以下正文部分保持原有代码不变 -->
  <div class="w3-container">
    <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
  </div>
</div>

如果不想使用框架栅格类，也可以用原生CSS浮动实现：给图片设置固定宽度+float:left，给标题容器设置对应大小的左外边距避开浮动的图片，最后给父元素清除浮动避免高度塌陷即可。但这种方法需要手动写响应式适配规则，维护成本更高。

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