css - 多张图片的 CSS 浮动功能不起作用。（图像和测试的垂直线不一致）

Question

我尝试制作几行容器，每个容器都有图像和文本。为此，我使用了 {float:left} 函数，但图像的左侧不是垂直一致的，如下所示。

图片链接：使用的代码

图片链接：代码的结果

我想让这个像：

（红框）你好

（蓝色框）我的名字是

(绿框) 故事

（紫框）歌曲

请给一些建议。

标签： cssimage

Answer 1

将所有元素放在一个 div 中，并将 display:flex 添加到您的新 div 项目中：

<div class="parent">
  <div>
   <div>Hello1</div>
   <div>my Name is</div> 
  </div>
  <div>
   <div>Hello2</div>
   <div>my Name is</div> 
  </div>
</div>

风格：

.parent{display:flex;}