css樣式列表中有一個整體，但爲什麼？

我正在一個網站上，剛剛意識到，我的項目名單中有一個整體，我無法找到問題： css樣式列表中有一個整體，但爲什麼？

http://www.einfall7.ch/beta/category/manufaktur/moebel/

的html代碼：

<li class="col-xs-12 col-sm-6 col-md-4"> 
       <a href="http://www.einfall7.ch/beta/manufaktur/massives-nussbaumbett/" class="title" title="massives nussbaumbett"> 
        <img width="500" height="313" src="http://www.einfall7.ch/beta/wp-content/uploads/2014/04/dsc_0142-500x313.jpg" class="attachment-thumbnail size-thumbnail colorbox-1376 wp-post-image" alt="Zoller Nussbaum Doppelbett">    <span>massives nussbaumbett</span></a> 
      </li>

CSS：

#content ul.ref{ 
margin: -15px; 
padding: 0px; 
} 

#content ul.ref li{ 
    margin: 0px; 
    list-style-type: none; 
    padding: 15px; 
} 

ul.ref li a > span{ 
    display: block; 
    position: absolute; 
    bottom: 14px; 
    height: 38.196%; 
    overflow: hidden; 
    width: calc(100% - 30px); 
    padding: 15px; 
    color: #fff; 
    text-decoration: none; 
    font-weight: 300; 
    font-size: 1.5em; 
    background: -moz-linear-gradient(top, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%); 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%); 
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#26000000', endColorstr='#a6000000',GradientType=0); 
      -moz-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); 
      -o-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); 
      -webkit-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); 
      transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); 
} 

    ul.ref li a:hover > span, ul.ref li a.hover_effect > span{ 
     background-color: rgba(0,0,0,0.5); 
    }

來源

2016-06-11 michael

其因爲spanbett div的高度是230px http://i.imgur.com/elZaHvJ.png和所有的其他div的高度是225px – hulkinBrain

作爲該分區的圖像是PNG，和其他人JPG

img[src$=".png"] { 
    margin-bottom: 5px; 
    background-color: #fff; 
}

這個CSS屬性被添加到裏面的圖像。 由於margin-bottom：5px而創建孔。刪除，你的問題將得到解決。

去除margin-bottom: 5px前：http://i.imgur.com/oxwEiyn.png

取出後margin-bottom: 5px：http://i.imgur.com/Bml1sMO.png

來源

2016-06-11 19:19:12 hulkinBrain

喜歡我的回答:) – dippas

@dippas是的確切：D我編輯我的答案，所以無法看到你的。 – hulkinBrain

它發生在我有時:)無後顧之憂 – dippas

這個問題通常發生在所有項目中，各個部門只是簡單地相互浮動，並突然出現div或圖像超出預期的尺寸。

解決方案1：

讓你的所有瓷磚的div是相同的高度。你可以設置min-height重複div。

解決方案2：使用JavaScript：

當曾經被調整大小的窗口或新的圖像被加載時，計算所有div的最大高度在一排，並將其設置爲最小高度。

解決方案3：

爲什麼不把瓦多一點與像磚石裝箱插件智能http://masonry.desandro.com/

來源

2016-06-11 19:17:17

您的問題就在這裏：

img[src$=".png"] { 
    background-color: #fff; 
    margin-bottom: 5px; 
}

只是刪除margin-bottom，

因爲這是您列表中唯一的png，您可能會在NOT想要刪除margin-bottom，因爲您在您的站點的其他地方使用它，解決方案正在將png更改爲jpg src。

來源

2016-06-11 19:18:25 dippas

也謝謝你！如果可以的話，我會選擇兩個答案都是正確的。 ;-) – michael

css樣式列表中有一個整體，但爲什麼？

回答

相關問題