向左浮動但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在左側留空格

回答

相關問題