Jquery 删除图像之间的顶部空间

我有这个。。。（img）

我需要这个。。。（img）

最好的方法是什么？可以用CSS吗？我可以用jQuery吗？我需要最简单的方法

这是我的CSS

 <style>
    container{
         background-color:gray; 
    }
    .container img{
        display:inline;
        vertical-align: top;
    }
 </style>

容器{
背景颜色：灰色；
}
.集装箱img{
显示：内联；
垂直对齐：顶部；
}

---

求你了！我需要帮助

对于所有图像，将样式设置为“float:left；”

使用此CSS：

img {
    float:left;
}

---

最简单、更方便的方法是使用脚本，如

您也可以尝试列计数。像这样：

.gallery{-webkit-column-count: 7; /* Chrome, Safari, Opera */
    -moz-column-count: 7; /* Firefox */
    column-count: 7;

    -webkit-column-gap: 4px; /* Chrome, Safari, Opera */
    -moz-column-gap: 4px; /* Firefox */
    column-gap: 4px;}

说明：您需要7列，因此您可以将内容跨越7列（我添加了4个空格，以备您需要）。它会像你想的那样工作，但是。。。。你会将IE9及以上的版本从图片中删除

所以，我的建议还是砖石工程

html

---

这取决于您的html标记，而且垂直对齐不适用于内联，请改为设置内联块。@C-linkNepal您能说得更具体一点吗？另外，如果我使用内联块，图像会对齐到底部而不是顶部，因为图像大小不规则。。。你需要管理你的html。。。或者你可以使用massionry，搜索它。你需要为此更新标记，因为你的图像高度不同但宽度相同，请将它们按列而不是按行排列。@SamyS.Rathore好的，这听起来像是一个解决方案，但我怎么做？有任何css标记吗？谢谢，这是我想要的，我只是关心IE，我认为它在IE上不起作用，对吗？

<div class="masonry">
    <div class="item"><img src="http://placehold.it/150x50"/></div>
   <div class="item"><img src="http://placehold.it/150x100"/></div>
   <div class="item"><img src="http://placehold.it/150x150"/></div>
   <div class="item"><img src="http://placehold.it/150x50"/></div>
   <div class="item"><img src="http://placehold.it/150x50"/></div>
   <div class="item"><img src="http://placehold.it/150x150"/></div>
   <div class="item"><img src="http://placehold.it/150x200"/></div>
</div>

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}
img {
    width: 100%;
    min-width: 150px;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}
body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}