对齐同一行内的图像

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）。使用display：inline-block;和vertical-align：top;

参见示例

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
}

希望这有帮助。

Answer 2

您能否发布包含图片的html代码？通常你应该能够通过应用css样式“float：left”并确保可用宽度足够来添加它们（确保计算容器的填充和图像的边距以确定可用宽度）。

Answer 3

如果您使用float:left，这将解决您的问题。

• http://goo.gl/vtHg3b

Answer 4

如果没有看到您的代码，很难肯定地说，但看起来您的图片不适合他们的容器。如果在空间不足时将它们浮动，则会强制将元素下移到下一行。如@davidpauljunior所述，您可以尝试删除应用于图像的任何右边距。如果那个doensnt工作，你可以缩小图像的大小（如果由background属性应用），通过将宽度和高度值减少90％（或任何你可能需要的）并应用

{{{ 1}}

 到图像容器。 如果它们是内联图像则更好。只需使用

background size: 90%;

并删除内联元素的所有应用尺寸。希望有所帮助。