1

動的にスケーリングする画像を含むフローティング ブロックのセットを中央に配置しようとしています。ただし、フロート ブロックに入るために使用しているインライン ブロックが画像の新しいサイズに縮小されないという問題があります。代わりに、画像の元のサイズに折り返され、大きな空白が残ります。

http://jsbin.com/ewonas/1/

body {
    text-align: center;
}

.inlineblock {
    background: red;
    display: inline-block;
}

.constrainer {
    width: 20%;
    float: left;
}

.constrainer img {
    width: 100%;
}

<body>
    <div class="inlineblock">
        <div class="constrainer">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
            <h1>Product title</h1>
        </div>
        <div class="constrainer">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
            <h1>Product title</h1>
        </div>
    </div>
</body>

誰かがこの問題を解決するのを手伝ってくれませんか?

ありがとう

4

1 に答える 1

1

.constrainer2 つのdivの幅を に設定してい20%ます。これが意味することは、幅が親の 20% であること.inlineblockです。したがって、そのうちの 2 つが必要な場合は、合計すると親の 40% になります。つまり、残り 60%、つまりさらに 3 .constrainerdiv 分のスペースがあることを意味します。

.inlineblock要素を縮小するには、div の幅を親から独立した数値に設定する必要があります。.constrainerたとえば300px、パーセンテージではなく固定幅などです。

実際の例: http://jsbin.com/ewonas/6

于 2013-02-07T23:54:34.597 に答える