如何在含图片的div类元素旁添加同行文本？

要让国旗图标和类型文本在同一行紧邻显示，核心是调整元素布局方式与HTML结构，具体修改如下：

1. 调整HTML结构 #

把.info从.italy容器中移出，用一个父容器包裹图标和文本，确保两者处于同级结构：

<!-- item one -->
<article class="film drama">
  <img src="https://m.media-amazon.com/images/M/MV5BOWYwOTBmOGMtZWZiNC00YjNjLWIzOTUtNGEzZWFkYTg1ZDdjXkEyXkFqcGdeQXVyMjgyNjk3MzE@._V1_FMjpg_UX1000_.jpg" alt="media image">

  <div class="item-desc">
    <div class="subtitle">lazzaro felice (2018)</div>
    <!-- 新增父容器包裹图标和文本 -->
    <div class="flag-info">
      <div class="italy"></div>
      <div class="info">剧情片</div> <!-- 添加类型文本 -->
    </div>
  </div>
</article>

2. 修改CSS样式 #

通过Flex布局实现同行显示，同时调整间距让文本紧邻图标：

.item-desc {
  background-image: Url('https://64.media.tumblr.com/a273ca5e593b171e3fb237974bf40c8c/7dfc5099f5485297-4e/s2048x3072/3f00eac237cd5d0db7ee1cb72fdf06b175db9679.jpg');
  height: 85px;
  box-shadow: -7px -7px 10px -5px transparent, 7px 7px 10px -5px transparent, 0 0 5px 0px rgba(255, 255, 255, 0), 0 55px 35px -20px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease, box-shadow 0.2s ease;
  will-change: transform, filter;
}

.subtitle {
  background-image: Url('https://64.media.tumblr.com/d3b90aee405195699e293f320c7da8df/9e2fb2468a7c651d-9f/s250x400/1952c00e74253264eb65fafbfc0a634a68b86704.png');
  padding: 5px;
  border: 2px outset white;
  color: #fff;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  transition: 0.3s;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
}

.subtitle:hover {
  color: #000;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

.italy {
  background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/sony/336/flag-italy_1f1ee-1f1f9.png');
  height: 20px;
  width: 25px;
  background-size: cover;
}

.info {
  font-style: normal;
  padding-left: 8px; /* 缩小左侧间距，让文本紧邻图标 */
  color: #fff;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

/* 新增父容器样式，用Flex实现同行垂直居中 */
.flag-info {
  display: flex;
  align-items: center;
  margin-top: 8px; /* 和subtitle拉开间距 */
}

关键修改说明 #

• 原结构中.info嵌套在.italy内，且两者都是块级元素，必然换行；调整为同级结构后才能实现同行显示。
• 用display: flex的父容器可轻松实现图标与文本的垂直居中+同行布局，也可替换为给.italy和.info设置display: inline-block; vertical-align: middle;，效果一致。
• 缩小.info左侧内边距，让文本与图标紧密相邻，同时添加文本样式适配背景，提升可读性。

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