我创建了四个垂直对齐的div，四个分别左，右，左，右浮动。在每个div中，我有一个图像和<span>定义图像。在第一个div（对齐：左）中，我有左边的图像，而文本（span）在右边，我只是通过将图像浮动到右边，并将<span>设置为{{{ 1}}，这个会自动将我的图像左对齐，文本向右对齐，在分区内。同样在下一个display:block中，我已将图片对齐div的右侧，并且span已设置为<div>，但这不起作用，display:block属性居中text-align:center考虑整个div，它来自图像，而不是将自身与div中左上空间的中心对齐。 我有的主要问题。继续第三个div再次对齐，并且完全使用相同的属性，现在对于第四个div，我感到惊讶的是第四个div，它是正确的（如第二个），工作得非常好，图像上的<span>，将其与div的右侧对齐，文本在右侧的剩余空间中居中对齐。
第二个和第四个div是相似的，即向右浮动，右边的图像和左边的文本，它们使用相同的CSS类，相同的属性，唯一的区别是它们第四次出现在我的html稍后它工作正常但是第二个没有。
这是我的第二个div的代码
float:right我知道这些是不止一个图像，但它们是使用动画和JavaScript逐个显示的。
此div的CSS
<div class="din">
<img src="d1.jpg" class="sp2 lan" width="400px" height="210px" />
<img src="d2.jpg" class="sp2 lan" width="400px" height="210px"/>
<img src="d3.jpg" class="sp2 lan" width="400px" height="210px" />
<img src="d4.jpg" class="sp2 lan" width="400px" height=210px" />
<img src="d5.jpg" class="sp2 lan" width="400px" height="210px" />
<img src="d6.jpg" class="sp2 lan" width="400px" height="210px"/>
<img src="d7.jpg" class="sp2 lan" width="400px" height="210px" />
<img src="d8.jpg" class="sp2 lan" width="400px" height=210px" />
<img src="d9.jpg" class="sp2 lan" width="400px" height="210px" />
<img src="d10.jpg" class="sp2 lan" width="400px" height="210px"/>
<img src="d11.jpg" class="sp2 lan" width="400px" height="210px" />
<img src="d12.jpg" class="sp2 lan" width="400px" height=210px" />
<span class="inside-text">Your living style matters,<br /> a better<br />
living room</span>
</div>
类.din{
border:2px solid #000;
width:600px;
height:210px;
margin-top:-4px;
margin-right:30px;
float:right;
}
.sp2{
float:right;
}
.inside-text{
display:block;
text-align:center;
font-size:20px;
margin:15px;
line-height:2;
color:grey;
font-weight:bold;
}
用于动画，无论如何发布它。
.lan注意：.lan{
animation:fading 5s infinite
}
类在JavaScript中使用，所以我不能在另一个div中使用它，所以我为第四个div创建了一个名为sp2的类似类，这里是div的代码
sp4它的CSS
<div class="din">
<img src="w1.jpg" class="sp4 lan" width="400px" height="210px" />
<img src="w2.jpg" class="sp4 lan" width="400px" height="210px"/>
<img src="w3.jpg" class="sp4 lan" width="400px" height="210px" />
<img src="w4.jpg" class="sp4 lan" width="400px" height=210px" />
<img src="w5.jpg" class="sp4 lan" width="400px" height="210px" />
<img src="w6.jpg" class="sp4 lan" width="400px" height="210px"/>
<img src="w7.jpg" class="sp4 lan" width="400px" height="210px" />
<img src="w8.jpg" class="sp4 lan" width="400px" height=210px" />
<img src="w9.jpg" class="sp4 lan" width="400px" height="210px" />
<img src="w10.jpg" class="sp4 lan" width="400px" height="210px"/>
<img src="w11.jpg" class="sp4 lan" width="400px" height="210px" />
<img src="w12.jpg" class="sp4 lan" width="400px" height=210px" />
<span class="inside-text">Your living style matters,<br /> a better<br />
living room</span>
</div>
这个部门工作正常。
我知道我可以使用.sp4{
float:right;
}
属性将图像右对齐，但图像会在文本中淡入和淡出 ，除了图像之外，如何将文本放在左侧。我甚至尝试为两个div的图像提供一个新类，并在该类中设置属性margin-left，它仍然在第4个工作但不在第2个工作。
我附上了两个div的截图。
我知道我写的方式太多了，我只是这样说清楚。
Image of second div, the one causing problems
Image of fourth div, looks perfect, this is how I want the second one
感谢任何帮助。感谢
