Question

我得到了这个......（img）https://imageshack.com/i/exRHvxtfp

我需要这个......（img）https://imageshack.com/i/pdvA6JXIp

最好的方法是什么？用CSS可以吗？我可以用jQuery做吗？我需要最简单的方法来做到这一点

这是我的CSS ...

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

请！我需要帮助

Answer 1

对于所有图片，请将样式设置为＆＃39; float：left;＆＃39;

使用此CSS：

img {
    float:left;
}

Answer 2

最简单，最方便的方法是使用Masonry

之类的脚本

您也可以尝试COlumn Count。像这样：

.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列（我已经添加了4px间隙以防您需要）。它会按照你想要的方式工作，但是......你会把IE9和更旧版本从图片中删除

所以，我的建议再次是Masonry

Answer 3

<强> Demo

HTML

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

CSS

.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;
    }
}

删除图像之间的顶部空间

3 个答案: