CSSスタイルのリストには全体が表示されますが、その理由は何ですか？

Question

私はプロジェクトの私のリストはそれで全体を持っている、と私は問題を見つけることができないことを、ウェブサイト上で作業し、ちょうど実現しています：

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

Answer 1

、等は、このCSSプロパティが内部画像に付加されている

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

をJPGれます。 margin-bottom：5pxのために穴が作成されています。これを削除すれば、問題は解決されます。margin-bottom: 5pxを除去した後http://i.imgur.com/oxwEiyn.png

：margin-bottom: 5pxを取り外す前に

http://i.imgur.com/Bml1sMO.png

Answer 2

この問題は、通常、部門が互いに隣り合って浮かび、突然divまたはイメージが予想外の次元から逸脱するすべてのプロジェクトで発生します。

解決策1：

すべてのタイルdivを同じ高さにします。繰り返すdivにはmin-heightを設定できます。

解決策2：JavaScriptを使用して：ウィンドウのサイズが変更されたり、新しいイメージがロードされ、これまで、行のすべてのdivの最大高さを計算し、最小の高さとして設定

。

解決策3：

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

だけmargin-bottom、

を削除：

なぜ、あなたの問題はここにある石造http://masonry.desandro.com/

Answer 3

のようなビン梱包のプラグインとのタイルが少しよりインテリジェントにしませんこれはあなたのリストにある唯一のpngなので、NOTmargin-bottomはサイト内の別の場所で使用しているため、この解決策はpngをjpg srcに変更しています。そのDIVの画像がPNGであるよう