gpt4 book ai didi

html - 使用导航栏、旋转木马和简介进行容器定位

转载 作者:行者123 更新时间:2023-11-28 15:12:27 25 4
gpt4 key购买 nike

我有一个导航栏、旋转木马和简介。

我想要的:

  • 轮播全宽和全高。
  • 轮播上方的导航栏
  • 在轮播下介绍。

我现在拥有的:

  • 轮播全宽和全高,但轮播中的图片只有全宽,没有全高
  • 旋转木马顶部的导航栏(成功)
  • Intro 在导航栏下开始,假设在 carousel 下开始

html

<div class="carousel"></div>
<div class="navbar"></div>
<div class="intro"></div>

CSS

html, body { height: 100%; width: 100% }
.navbar {}
.intro {}

.carousel {
position: absolute;
margin: auto;
display: block;
height: 100%;
width: 100%;
z-index: -1;
}

最佳答案

我为轮播和导航栏添加了一个新容器。然后我将导航栏完全定位在其中(将其粘在顶部)。

这是代码(运行底部的代码片段):

html, body
{
height: 100%;
width: 100%
}

#carouselNavBarContainer
{
position:relative;
float:left;
width:100%;
}

.carousel
{
position: relative;
float:left;
width: 100%;
height: 100%;
margin: 0;
padding:10px
display: block;
z-index: 1;
border:1px solid #09f;
}

.carousel img
{
width:100%;
height:auto;
}

.navbar
{
position:absolute;
top:0px;
z-index:2;
border:1px solid #f00;
padding:10px;
}

.intro
{
position:relative;
float:left;
border:1px solid #000;
padding:10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
<div id="carouselNavBarContainer">
<div class="carousel"><br/><br/><br/><br/><br/><br/><br/>This is the carousel.</div>
<div class="navbar">NAVBAR GOES ON TOP</div>
</div>
<div class="intro">Intro on the bottom</div>
</body>

</html>

关于html - 使用导航栏、旋转木马和简介进行容器定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48033179/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com