0

1 つの div が約 30%、残りの 70% を占めるグリッドがあります。30% div には、4 つの画像が縦に積み上げられています。70% div にはコンテンツがあります。4 つの画像のサイズを動的に変更してトリミングし、70% のコンテンツ div の高さに等しくするにはどうすればよいでしょうか。画像のサイズを手動で変更できることはわかっていますが、コンテンツが追加または削除された場合は自動調整したいと考えています。また、デザインはレスポンシブです。ここにjsfiddleがあります：

http://jsfiddle.net/fETtm/

ここに私のHTMLがあります:

<section>
    <div id="inner-content" class="wrap">
        <aside class="fourcol first">
            <img src="https://www.slooh.com/images/signup/m42_png_sm.png">
            <img src="https://www.slooh.com/images/signup/m42_png_sm.png">
            <img src="https://www.slooh.com/images/signup/m42_png_sm.png">
            <img src="https://www.slooh.com/images/signup/m42_png_sm.png">
        </aside>

        <article class="eightcol">
            <h3>H3 Title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
    </div>
</section>

助けてくれてありがとう。

4

1 に答える 1

0

overflow: hidden.wrap適用される要素（ここではコンテナ）の外側にあるものはすべてカットされます。

デモ: http://jsfiddle.net/fETtm/1/

フローから画像を削除すると ( position: absolute)、右側の列のみがフローに残り、そのコンテナーのサイズが定義されます。これで、このボックスの外側にある画像は表示されなくなります。
左の列がフローから削除されたため、テキストはコンテナーの幅全体を占めるようになったため、必要になりますpadding-left(画像の幅と同じ値)。

HTML:あなたのものと同じ

CSS:

.wrap {
    position: relative;
    overflow: hidden;
    outline: 1px dashed purple;
    max-width: 1140px;
    width: 96%;
    margin: 0 auto;
}

.fourcol {
    width: 31.491712705%;
    position: absolute;

}

.eightcol {
    width: 65.74585634900001%;
    position: relative;
    float: left;
    margin-left: 2.762430939%;
    padding-left: 31.491712705%;
}

.first {
    margin-left: 0;
}
于 2013-03-23T20:01:13.637 に答える