Question

我刚刚在我的主页中插入了一个缩小浏览器窗口大小缩小内容的图片滑块然而我的问题是，当图像滑块自身调整大小时，我的下方有一个不会向上移动的div，因此我留下了大部分空白区域。

这是否与滑块下方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上设置了485px的上边距。我猜这是因为你在滑块上使用绝对定位，你需要留一个足够大的间隙。

相反，将事物放回到常规文档流程（相对定位）中，并在#ContentWrapper上设置边距，以便在它和滑块之间创建适当的间隙。

如何修复我的div，使其在重新缩放图像时向上移动

1 个答案: