如何为div类内特定元素应用CSS样式，实现图文并排？

当然可以！你碰到的问题是直接给图片加float: right时，没处理好布局上下文导致影响了父容器内的其他元素。其实我们有几种简单的方法可以精准控制单个元素的样式，不会波及.info里的其他内容。

方法1：给目标图片单独添加类（最推荐，利于维护） #

先修改CSS，给图片单独定义浮动样式：

.info { 
  color: #eaeaea;
  overflow: auto; /* 解决浮动导致父容器高度塌陷的问题 */
}
/* 专门给需要浮动的图片写样式 */
.info .img-right {
  float: right;
  margin-left: 10px; /* 让文字和图片之间留些间距，避免拥挤 */
}

然后对应修改HTML，给图片加上自定义类：

<div class="info">
 <h3>Info</h3>
 <img src="img.jpg" alt="Image" width="70px" height="113px" class="img-right">
 <p>Information on the image</p>
</div>

这样只有带.img-right类的图片会应用浮动效果，.info里的标题和段落完全不受影响。

方法2：用CSS后代选择器直接选中图片（适合容器内只有这一张图的情况） #

如果这个.info容器里只有这一张图片，也可以不用额外加类，直接通过后代选择器定位：

.info { 
  color: #eaeaea;
  overflow: auto;
}
/* 仅选中.info下的img元素 */
.info img {
  float: right;
  margin-left: 10px;
}

HTML保持原结构即可，不需要修改：

<div class="info">
 <h3>Info</h3>
 <img src="img.jpg" alt="Image" width="70px" height="113px">
 <p>Information on the image</p>
</div>

小提示：解决浮动的副作用 #

为什么要给.info加overflow: auto？因为浮动元素会脱离文档流，如果父容器没有设置高度，就会出现高度塌陷（父容器高度变成0），加上这个属性就能让父容器包裹住浮动的图片和文字，布局更稳定。

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