Html 忽略图像主体并覆盖整个div

我已经创建了四个垂直对齐的div，这四个div分别浮动为左、右、左、右。在每个div中，我有一个图像和一个定义图像的

。在第一个div（aligned:left）中，图像位于左侧，而文本（span）位于右侧，我只是通过将div中的图像向右浮动，并将

设置为

显示：块
，这将在分区内自动将图像向左对齐，文本向右对齐。类似地，在下一个
中，我将图像对齐到div的右侧，span已经设置为
显示：block
，但这不起作用，
文本对齐：居中
属性将
置于整个div的中心，并覆盖到图像上，而不是将自身与div中左上角的中心对齐。这是我的主要问题。继续到第三个div，它再次向左对齐，并且使用相同的属性完美地工作，现在对于第四个div，我感到惊讶的是第四个div，它向右对齐（就像第二个div），工作得非常好，图像上的
float:right
将其对齐到div的右侧，文本在右侧剩余的空间中居中对齐。
第二个和第四个div是相似的，即向右浮动，右边是图像，左边是文本，它们使用相同的CSS类，相同的属性，唯一的区别是第四个div出现在我的html中稍晚一点，工作正常，但第二个没有。
这是我的第二个div的代码

<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>      

Class
.lan
是用于动画的，不管怎样都可以发布

.lan{
animation:fading 5s infinite
}

注意：
sp2
类是在JavaScript中使用的，所以我不能在另一个div中使用它，所以我为第四个div创建了一个类似的类，名为
sp4
，下面是该div的代码

<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>

这个部门运作良好。
我知道我可以使用
margin left
属性将图像向右对齐，但是图像会在文本上方淡入淡出，如何将文本放置在左侧，而不是图像。我甚至尝试给两个div的图像赋予一个新类，并设置属性
float:right
，在该类中，它在第4个div上仍然有效，但在第2个div上没有。
我附上了两个部门的截图。
我知道我写得太多了，我这样做只是为了清楚



感谢您的帮助。谢谢
因为给定的代码与屏幕截图显示的不一样，所以您需要提供一个工作代码片段来重现问题，否则我们就只有猜测他说了什么了。您提到sp2类是“在JavaScript中使用的”，这意味着sp4不是，所以这显然是有区别的，但您从未显示导致这种差异的JavaScript！此外，您还有拼写错误，缺少引号，语法突出显示处于关闭状态，因此您可能希望通过W3C验证程序运行HTML。@MrLister两个div都有各自的JavaScript类sp2和sp4，这两个类在CSS中具有相同的属性（float）。它们在JavaScript中用于slider（一次显示在屏幕上）。@LGSon我实际上不明白你的意思，我提供的代码在屏幕截图中给出了输出。
<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;
}