0

レスポンシブな3x3グリッドのビデオサムネイルがあり、きれいな写真を使用してvimeoクリップをライトボックス化します。一部の解像度ではうまく機能しますが、ブラウザウィンドウの幅のサイズを変更すると、3x3からこのナンセンスに急速に変化します。
何？

これは問題のあるCSSです。

     .thumb
{
float: right;
width: 25%;
height: auto;
margin: 2%;
}
    .maincontent
{
margin:0 auto;
width:90%;
float:right;
}

そして、それが重要な場合は、HTMLのスニペット。

        <div class="maincontent">
    <a href="http://vimeo.com/428525" rel="prettyPhoto" title="">
       <img class="thumb" src="http://ftfrmedia.com/images/thumbnails/Overview-thumb.jpg" alt="Company Overview" width="60" />
       </a>

私は真剣に困惑しています...

4

2 に答える 2

2

.thumbこれはフロートインとの問題だと思いますimg。

フロートをに置き換えるとdisplay: inline-block、問題が解決するはずです。

.thumb {
    height: auto;
    margin: 2em;
    width: 25%;
}

img {
    display: inline-block;
    *display: inline;        /* IE7 hack as it does not */
    *zoom: 1;                /* support display: inline-block */  
    height: 3em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-top: -1.6em;
    width: 3em;
}

アップデート

以下の@DaveHaighで指摘されているように、display: inline-blockこれはすでに高さと幅のプロパティを受け入れているため、img要素で使用する必要はありません。

したがって、フロートを削除するだけでこの問題は解決します。画像の右から左への流れを維持したい場合はdirection: rtl、親に追加できます。

.maincontent {
    direction: rtl;
}

これの欠点は、テキストが右から左に流れることですが、.maincontent要素内でテキストを使用していないため、これはWebサイトでは問題になりません。

于 2012-05-30T12:59:49.317 に答える
1

.thumbおよびのフロートを削除しimgます。また、margin: 2em;on.thumbをパーセント値に置き換えます2%。

于 2012-05-30T13:04:12.637 に答える