html - 对齐同一行内的图像

Question

我在对齐某些图像时遇到问题。以下是当前情况的屏幕截图:

我试图让所有四张图片都排在同一“行”上。以后的任何图像都将从新的一行开始。

我试过各种方法，但都没有用。如果用户可以给我一个粗略的开始，我将不胜感激。

我想补充一点，每张图片都有一个简单的动画:

        $(document).ready(function(){
        $("#id").hover(function(){
            $(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
            },function(){
            $(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
        });
    });

Answer 1

一种方法可以使所有图像对齐，而不必将元素扔到 DOM 之外(使用 Floats 可以做到这一点)。使用显示:内联 block ；和垂直对齐:顶部；

看例子

img {
    display: inline-block; // This will align your items side-by-side
    vertical-align: top; // Why because by default Inline-block sets your vertical to baseline
}

希望这对您有所帮助。