css - 使用流体布局使两个 div 在绝对定位的 div 下流动

Question

我正在使用一个相对定位的 div 来包含一个幻灯片，其中的 img 被设置为绝对定位。我有两个 div，我需要在图像之后流动。我不想在 CSS 中使用“top”，因为它会在调整浏览器窗口大小时创建一个巨大的空间。目标是一种流畅的布局，其中图像的大小会根据浏览器宽度调整。

我已经竭尽全力地寻找答案，但我还是空手而归。

我现在的情况可以看这里:http://kschassen.com/huberd-design/如果您使浏览器窗口变窄，您将看到在保存文本的 div 和上面的幻灯片之间创建的大空间。 (在 CSS 中使用 top 和一个值的结果)

这是我想要的布局，当然只有旋转图像:http://kschassen.com/static-image-website/index-for-testing.html

我希望有一个不需要大量脚本的简单解决方案，但是，我知道绝对定位是造成这种情况的罪魁祸首。任何建议将不胜感激。

Answer 1

jQuery 解决方案

您需要将 .header-container div 移动到 .fade-in div 上方(对于非 js 解决方案，您也需要这样做)

<script>
    $(document).ready(function(){
        var fadein = $('.fadein'),
            images = $('.fadein').find('img');

        fadein.css('height', images.height()); // set initial height

        $(window).resize(function(){ //on window resize, set height to height of image
            fadein.css('height', images.height());
        });
    });
</script>

原创非js方案

如果您不想使用脚本，我想出的使带有绝对图像的 div 响应的唯一方法是在其中添加另一个具有 position: relative; 的元素； visibility: hidden; 以及所有相同大小的属性。如果您所有的图片大小都相同，只需复制其中一张即可。

你有四张像这样的图片:

<img src="images-large/pollack-north.jpg" alt="English country style home built by Huberd Design" style="display: block;">

在它们下方添加一个 div，并将内部相同的图像设置为 position: relative;可见性:隐藏；

<div class="create-height">
    <img src="images-large/pollack-north.jpg" style="visibility: hidden; position: relative;">
</div>

这是一个 codepen 我在哪里使用这个功能。它添加了一个额外的元素(或 2 个)，但您可以放弃 javascript。