Javascript 我的浮动类正在停用我的滚动类

多亏stackoverflow的慷慨帮助，我能够在不同的图像上放置不同颜色的CSS框，并在鼠标悬停时移除CSS框（显示图像）。这是我用小提琴演奏的代码

但是，我也希望框在浮动中水平对齐，因此（作为初学者）我在图像周围放置了另一个类（称为float）（类内滚动），但它禁用了滚动

有没有比我在下面做的更好的方法来实现浮动

提前谢谢你的帮助

<div class="float">
<div class="rollover a">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/1.jpg"  />
</div>
</div>

<div class="float">
<div class="rollover b">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/2.jpg"  />
</div>
</div>
<div class="float">
<div class="rollover c">
    <img src="http://blahblah.com/wp-content/uploads/2011/01/3.jpg"  />
</div>
</div>

.float
{
float: left;
width: 200px;
border: 1px solid #fff;
margin: 0 15px 15px 0;
padding: 5px 10px 10px 10px;
}

浮动
{
浮动：左；
宽度：200px；
边框：1px实心#fff；
利润率：0 15px 15px 0；
填充：5px10px 10px 10px；
}

---

您可以将

float

类直接添加到内部

div

的类中

另外，

float

通常不是一个很好的类名。您应该给它一个语义上有意义的名称，并通过CSS附加它的表示。您正在将CSS实现细节泄漏到HTML中

---

.

我将您发布的jsfiddle分叉，并能够用两行3幅图像将它们向左浮动。您只需为每个容器添加更多水平图像，并添加更多容器以添加更多行

我对你的代码进行了修改。查看是否是您想要的。@无法判断我是否尝试了您的代码，但滚动已停用，请参阅。模因模因。com@Can不说了，你现在不会看到问题了，因为我在网站上输入了新代码。这篇文章的标题很棒。暗示了一些深层次的无效，也许是心碎。决定不投赞成票，但谢谢你搭便车。@Alex，谢谢你拉小提琴。实际上将有4行，每行有3个图像，因此小提琴中的解决方案无法满足我的要求（因为我认为您的解决方案只需将12个图像水平对齐），您知道如何将其设置为4 X 3吗？另外，如果CSS实现细节已经通过页面源代码可见，那么“将CSS实现细节泄漏到HTML中”的缺点是什么？只是好奇……这不是安全原因，不是吗？@Micheal这不是安全原因，只是你应该给他们一个很好的语义名称，比如信息框之类的，并在CSS中留下

float

。浮动的多个元素将落在它们下面@亚历克斯：谢谢你的建议。我从你这里学到了很多。如果你查看结果（www.memeofmemes.com），你会发现CSS和图像的对齐并不完美。。。你知道如何解决这个问题吗（在母亲节之前）？@迈克尔看起来很完美，你使用的是什么浏览器？@Alex我在Chrome、Firefox和Safari上注册了，它们看起来都像我作品中的图片。你使用的是什么浏览器？谢谢，我已经找到了上面的解决方案，但也从你那里学到了一些东西。非常感谢。