0

私はいくつかのレスポンシブ画像技術をいじっていましたが、私を混乱させるものに出くわしました。

hrefコンテナ内のタグでラップされた画像があります。コンテナは、すべてをまとめるコンテナとしても機能します。タグは、特定のhrefサイズが定義されたイメージ コンテナーとして機能します。画像widthは、コンテナーに合わせて 100% に設定されます。

コードは次のとおりです。

The HTML:
---------
<div class="img-conatiner"> 
    <a href="#" class="img-grid">
        <img src="http://placekitten.com/300/300" alt="kittens!">
    </a>
    <a href="#" class="img-grid">
        <img src="http://placekitten.com/300/300" alt="kittens!">
    </a>
    <a href="#" class="img-grid">
        <img src="http://placekitten.com/300/300" alt="kittens!">
    </a>
    <a href="#" class="img-grid">
        <img src="http://placekitten.com/300/300" alt="kittens!">
    </a>
    <a href="#" class="img-grid">
        <img src="http://placekitten.com/300/300" alt="kittens!">
    </a>
    <a href="#" class="img-grid">
        <img src="http://placekitten.com/300/300" alt="kittens!">
    </a>
</div>

The CSS
-------
body {
    width: 90%;
    margin: 0 auto;
    background: tomato;
}

.img-grid {
    width: 20%;
    float: left; <-- what is this for?
    padding: 10px;
    -webkit-box-sizing: border-box;
}

.img-grid img {
    width: 100%;
}

例: http://jsfiddle.net/TBVWG/2/

がないとfloat、この手法は機能しません。親コンテナーの幅を無視して、画像が元のサイズに拡大されます。しかし、どうやっfloatてすべてをまとめているのでしょうか?

前もって感謝します。

4

3 に答える 3

0

おそらく width:100% の .img-grid img がこの問題を引き起こしています。画像の絶対幅/高さを使用してみてください。その後、フロートを削除できます。float に関する優れた記事はhttp://css-tricks.com/all-about-floats/にあります。

于 2013-10-24T05:51:35.963 に答える
0

デフォルトでは a-tag の幅を設定することはできません。最初にブロック要素にする必要があります。に追加display:block;する.img-gridと、問題が解決します。 フィドル

于 2013-10-24T06:43:25.093 に答える