Question

我有一个导航栏，旋转木马和介绍。

我想要的是什么：

旋转木马的宽度和高度。
导航栏顶部的导航栏
旋转木马下的介绍。

我现在拥有的内容：

旋转木马的全宽和高度，但旋转木马中的图像只是全宽而不是高度
导航栏上的导航栏（成功）
简介在导航栏下启动，并假设在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;
}

Answer 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>

Answer 2

您可以将父级div用于＆＃39; carousel＆＃39;和＆＃39; navbar＆＃39;并添加如下的样式 -

.parentDiv{
  position:relative;
  height:100%;
}

  /* Carousel full width and height with images */

  .carousel{
    position: absolute;
    margin: auto;
    display: block;
    height: 100%;
    width: 100%;
    left:0px;
    top:0px;
    padding-top:50px;
    z-index: -1;
  }

  /* note that images will be be stretchy */
  .carousel img{
    width:100%;
    height:100%;
  }

  /* Navbar on top over the carousel */
  .navbar{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:50px;  /* for Example */
    z-index:9; /* greater than carousel */
  }

使用导航栏，旋转木马和介绍进行容器定位

2 个答案: