向左浮动但div在左侧留空格

我尝试以div显示图像列表。因为我把它浮在左边，但在浮动之后留下很多空间而不是内联显示。你可以帮助快照是 enter image description here 向左浮动但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>

和我的CSS代码是

.col20 { 
    width: 17.5%; 
    float: left; 
    margin: 1%; 
    border: 1px solid #f5f5f5; 
    background: #e5e5e5; 
} 

.clear { 
    clear:both; 
}

请帮我如何解决这个问题。我想我的所有图像就像我的第一行内嵌

来源

2014-09-28 Sagar Saroha

你的HTML + CSS就好了，http://jsbin.com/layoguruwope/1/edit没有显示任何奇怪的东西，间距明智，这样图片中的奇怪空白似乎来自你没有提到的其他东西在你的帖子 – 2014-09-28 04:27:40

我认为你是正确的。因为当我在这些div中使用文本是工作正常，但不与图像。但我没有写任何形象的财产。你能建议我什么东西 – 2014-09-28 04:38:51

你是什么意思'显示内联'？一行中有5张图像还是一行中的所有图像？ – Witcher42 2014-09-29 05:02:12

你可以考虑使用display:inline-block而不是float:left 例如，

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

来源

2014-09-28 04:30:09

抱歉问题没有解决 – 2014-09-28 04:33:46

http://jsbin.com/zeqolelixuju/1/edit?html,css,js,output mmm？你可以给你的代码小提琴吗？我用迈克的一个... – 2014-09-28 04:37:24

如果你深呼吸一下就可以看到，并不是所有的图像具有相同的高度和问题着手，其中比其他的图像高： enter image description here

您可以检查this fiddle。在.col20我把一个固定的高度和overflow:hidden;现在一切正常，但在某些决议你可能有一些问题。另一种方法是使用masonry，但根据这是无用的。如果我是你，我会尝试获取相同尺寸（宽/高）（从后端，PHP或其他）的所有图像，或者如果只是一些简单的HTML，切片所有的相同尺寸。

来源

2014-09-28 11:18:50 stefanz

向左浮动但div在左侧留空格

回答

相关问题