2

Europeana APIからの画像を表示するための単純なサムネイル グリッドを作成したいと考えています。ただし、いくつかの奇妙な、おそらく非常に明白な理由により、フローティングが機能していないかのように、このグリッドに大きなスペースを持つランダムな行が表示されます。ただし、ランダムな画像 ( http://placehold.it/250x350 ) を使用した同じレイアウトには、この問題はないようです。ここで html と css の結果を参照してください: http://jsfiddle.net/VqJzK/1/。

グリッドの CSS

    .thumb {
        width: 200px;
        background-color: #F5F5F5;
        border-radius: 5px;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        text-align: left;
        position: relative;
        display: inline-block;
        float: left;
    }

    .thumb img {
        width: 150px;
        vertical-align: middle;


    }​

そしてhtml：

    <div class="thumb">
     <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
    </div>

    <div class="thumb">
     <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
    </div> 
....
4

2 に答える 2

1

フォーマットが壊れているのは、2 番目の例では一部の画像が高くなっているためです。背の高い画像はより多くのスペースを占有し、サムネイルがfloat:left設定されているため、背の高い画像の周りを流れます。これは、すべて同じ高さであるため、最初の例が機能する理由を説明しています。

つまり、フロートが適用されたときにwith - see css display プロパティfloat:leftもオーバーライドしていますdisplay:inline-blockdisplay:block

クラスの高さを削除float:leftまたは設定する.thumbと、サムネイルも期待どおりに整列します。

于 2012-10-31T13:21:53.893 に答える
0

標準のバグのように聞こえinline-blockますが、簡単な修正はコードを次のように変更することです。

 <div class="thumb">
     <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
    </div><div class="thumb">
     <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
    </div>

inline要素間のスペースとして扱われるため、要素を隣り合わせに並べます。テキスト自体は重要です。inline

または、次のようなコメントを使用することもできます。

<div class="thumb">
         <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
</div><!--

--><div class="thumb">
         <img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&amp;size=LARGE&amp;type=TEXT"/>
   </div>
于 2012-10-31T13:04:34.630 に答える