0

我有一个网格，其中一个 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 回答