Html div/image后面的文本

我只想在3张图片后面有一些文字。 这3个图像应该彼此相邻（成一行），当我悬停时，它们应该旋转并显示后面的文本

现在我的问题是，我不能让这3个div彼此相邻（但图像后面的文本：））

Html:

试着拉小提琴：

这里解决了

使用浮动来定位你的div，并将

<div>

---

你想在中间后面的代码> >代码>

最好的方法是不要使用浮点，Flex是更好的，有一个帮助：

<div id="teamContent">
    <div class="teamMember">
        <img src="https://placehold.it/150x150" alt="teamImage">
        <div class="data">
          <h3>name</h3>
          <h4>job</h4> 
        </div>
    </div>
    <div class="teamMember">
        <img src="https://placehold.it/150x150" alt="teamImage"/>       
        <div class="data">
        <h3>name</h3>
        <h4>job</h4>  
        </div>
    </div>
    <div class="teamMember">
        <img src="https://placehold.it/150x150" alt="teamImage"/>
        <div class="data">
        <h3>name</h3>
        <h4>job</h4>  
        </div>
    </div>
</div>

#teamContent {
  display: flex;
  justify-content: space-around;
}
.teamMember {
  text-align: center;
}
.data {
  opacity: 0;
  transition: opacity 0.5s;
}
.teamMember:hover .data {
  opacity: 1;
}
.teamMember img {
    transition: transform 0.5s;
}
.teamMember:hover img {
  transform: rotate(90deg);
}

名称
工作
名称
工作
名称
工作
#团队内容{
显示器：flex；
证明内容：周围的空间；
}
.团队成员{
文本对齐：居中；
}
.数据{
不透明度：0；
过渡：不透明度0.5s；
}
.teamMember:hover.data{
不透明度：1；
}
.团队成员img{
转变：转变0.5s；
}
.团队成员：悬停img{
变换：旋转（90度）；
}

---

谢谢，只需补充一点，文字确实在图像后面，只有当鼠标经过时才会出现

<div>

<div id="teamContent">
    <div class="teamMember">
        <img src="https://placehold.it/150x150" alt="teamImage">
        <div class="data">
          <h3>name</h3>
          <h4>job</h4> 
        </div>
    </div>
    <div class="teamMember">
        <img src="https://placehold.it/150x150" alt="teamImage"/>       
        <div class="data">
        <h3>name</h3>
        <h4>job</h4>  
        </div>
    </div>
    <div class="teamMember">
        <img src="https://placehold.it/150x150" alt="teamImage"/>
        <div class="data">
        <h3>name</h3>
        <h4>job</h4>  
        </div>
    </div>
</div>

#teamContent {
  display: flex;
  justify-content: space-around;
}
.teamMember {
  text-align: center;
}
.data {
  opacity: 0;
  transition: opacity 0.5s;
}
.teamMember:hover .data {
  opacity: 1;
}
.teamMember img {
    transition: transform 0.5s;
}
.teamMember:hover img {
  transform: rotate(90deg);
}