如何修复我的 div 以便它在重新缩放图像时向上移动

Question

我刚刚在我的主页中插入了一个图像滑块，当浏览器 window 调整大小时它会缩小内容。
然而，我的问题是我下面有一个 div，当图像滑块自行调整大小时它不会向上移动，所以我留下了一大块空白-space.

这与滑块下方 div 的 CSS 有关吗？

HTML

<div id="slider1_container">
        <!-- Loading Screen -->
        <div u="loading">
            <div id="loadingchild1">
            </div>
            <div id="loadingchild2">
            </div>
        </div>


        <!-- Slides Container -->
        <div id="slides" u="slides">
            <div>
                <div class="image1">
                    <img  u="image" src="C:\Users\Michael\Desktop\iMac-Mockup.png" />
                </div>


                <div class="toptext">
                    RED
                </div>
                <div class="bottomtext">
                    Build your slider with anything, includes image, content, text, html, photo, picture
                </div>
            </div>

            <div>
                <div class="image1">
                    <img u="image" src="C:\Users\Michael\Desktop\iPad-Mockup.png" />
                </div>
                <div class="toptext">
                    Red
                </div>
                <div class="bottomtext">
                    Build your slider with anything, includes image, content, text, html, photo, picture
                </div>
            </div>

            <div>
                <div class="image1">
                    <img u="image" src="C:\Users\Michael\Desktop\iPhone-Mockup.png" />
                </div>
                <div class="toptext">
                    Red
                </div>
                <div class="bottomtext">
                    Build your slider with anything, includes image, content, text, html, photo, picture
                </div>
            </div>
        </div>
<div id="ContentWrapper">
        <div id="FreeLanceText">
            <p>A Freelance Web Designer/ Developer in Chester full of Fresh ideas,</p>
            <p>I create Affordable and Stylish Websites to help your Business Online</p>
        </div>

CSS

#ContentWrapper
{

width:100%; /*1920px*/
height:100px;
background-color:#000000;
color:white;
margin-top:485px;
}

#FreeLanceText
{

    text-align:center;
    font-size:180%;

}

Answer 1

您在 #ContentWrapper 上设置了 485 像素的上边距。我猜这是因为您在滑块上使用了绝对定位，您需要为此留出足够大的间隙。

相反，将内容放回到常规文档流中（相对定位）并在 #ContentWrapper 上设置边距只是为了在它和滑块之间创建适当的间隙。

如何修复我的 div 以便它在重新缩放图像时向上移动

How can I fix my div so that it moves upwards when images are rescaled

html

css

responsive-design