我正在为工作建立这个网站,但我遇到了一个小问题。我认为有一个标题是个好主意,后面跟着一个旋转的横幅,然后是文本,但是当页面滚动时只有文本移动。它在我的全屏显示器上工作正常,但我试图让它在较小的屏幕上明显响应,横幅缩小但带有文本的 div 仍然与顶部的像素数相同。这在两者之间留下了一个没有吸引力的空间。
无论如何这是我的 html:
<div id="banner"><script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script> <img class="active" src="Images/banner1.jpg"> <img src=
"Images/banner4.jpg"> <img src="Images/banner2.jpg"> <img src=
"Images/banner3.jpg"> <img src="Images/banner5.jpg"></div>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
//Get current active image
var active = $('#banner .active');
// If there is another image(object) left then make that image next
// If not, go back to the first image of the banner div
if (active.next().length > 0) var next = active.next();
else var next = $('#banner img:first');
//Get the next image ready by modifying the z-index
next.css('z-index', '2');
//Fade out the active image, then
active.fadeOut(1000, function () {
//Move the active image to the back of the pile, show it and remove the active class
active.css('z-index', '1').show().removeClass('active');
//Make the next image the active one
next.css('z-index', '3').addClass('active');
});
}, 3000);
});
</script> <!--BANNER FINISH-->
<div id="content">
<div class="maintext">
<h1>Welcome to InstaGuard security</h1>
</br>
<p>We are installers of temporary security systems. </p>
</div>
和CSS:
#banner {
width: 100%;
top: 181px;
position: absolute;
}
#banner img {
position: fixed;
z-index:1;
width: 100%;
}
#banner img.active {
z-index:3;
}
#content {
position: relative;
top: 681px;
height: 1000px;
z-index: 70;
background-color: #FFF;
padding-top: 0.5%;
}
.maintext {
text-align: center;
width: 70%;
margin: auto;
font-family: 'Open Sans', sans-serif;
}
是否可以将“内容”div“粘贴”到“横幅”div 的底部,以便它们一起移动?如果您能提供任何帮助,我将不胜感激。
最佳答案
通过将父容器设置为 position: relative
并将其子容器设置为
position: absolute;
bottom: 0;
您将始终让子项位于父项的底部。
匹配你的例子:
#banner {
position: relative;
}
#content {
position: absolute;
bottom: 0;
}
Codepen 中的基本示例:http://codepen.io/Nice2MeatU/pen/avvGRO
关于html - 你能把一个 div 粘在另一个 div 的底部吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32522250/