Javascript 左侧浮动,但div在左侧留下空格

Javascript 左侧浮动,但div在左侧留下空格,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在div中显示图像列表。对于它,我将其向左浮动,但在向左浮动后,它会留下大量空间,并且不会内联显示。你能帮忙吗 快照是 我的html代码是 <div class="col75"> <div class="col20"> <img src="images/saari1.jpg" width="100%" /> </div> <div class="col20"> <img

我试图在div中显示图像列表。对于它,我将其向左浮动,但在向左浮动后,它会留下大量空间,并且不会内联显示。你能帮忙吗 快照是

我的html代码是

<div class="col75">
    <div class="col20">
        <img src="images/saari1.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari2.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari3.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari4.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari5.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari1.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari2.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari3.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari4.jpg" width="100%" />
    </div>
    <div class="col20">
        <img src="images/saari5.jpg" width="100%" />
    </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
请帮我解决它。我希望我的所有图片就像我的第一行内联

你可以考虑使用显示:内嵌块代替浮点:左 e、 g


如果深入观察,您会发现并非所有图像都具有相同的高度,问题是从哪里开始的图像比其他图像高:

你可以查一下。在.col20上我放置了一个固定的高度和溢出:隐藏;现在一切都好了,但是在一些决议上你可能会有一些问题。 另一种方法是使用,但根据这是无用的


如果我是你,我会尝试从后端、php或其他任何东西获取相同大小、宽度/高度的所有图像,或者如果只是一些简单的html,则以相同的尺寸对所有图像进行切片。

你的html+CSS很好,没有显示任何奇怪的、按间距排列的图像,所以你的图片中奇怪的空白似乎来自于你在帖子中没有提到的其他东西,我认为你是对的。因为当我在这些div中使用文本时,可以很好地工作,但不适用于图片。但我并没有为图像编写任何属性。你能给我提个建议吗?你说的“在线显示”是什么意思?5个图像在一行还是所有图像在一行?嗯?你能修改一下你的代码吗?我用了迈克的一个。。。
.col20 {
    width: 17.5%;
    float: left;
    margin: 1%;
    border: 1px solid #f5f5f5;
    background: #e5e5e5;
}

.clear {
    clear:both;
}
.col75 {
    font-size:0px;
}
.col75 > div {
    display:inline-block;
    font-size:12px; // for expample
    vertical-align: baseline !important;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;        
    margin:1% 1% 0 0; // you may consider using px instead of %
    border:1px solid #f5f5f5; 
    background:#e5e5e5;
}