文章/答案/技术大牛

发布

社区首页 >问答首页 >带肚脐、旋转木马和介绍的集装箱定位

问带肚脐、旋转木马和介绍的集装箱定位
EN

Stack Overflow用户

提问于 2017-12-30 10:46:34

回答 2查看 52关注 0票数 1

我有肚脐，旋转木马和介绍。

我想要的：

旋转木马的宽度和高度。
在旋转木马上方的纳瓦巴
在旋转木马下面介绍。

我现在拥有的：

旋转木马的全部宽度和高度，但旋转木马中的图像仅为全宽度，而不是高度。
旋转木马上方的Navbar (成功)
导论从肚脐开始，假设从旋转木马开始。

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

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-12-30 11:00:27

我为旋转木马和肚脐添加了一个新容器。然后我把肚脐完全放在里面(把它粘在上面)。

下面是代码(运行底部的代码段)：

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>

票数 1

Stack Overflow用户

发布于 2017-12-30 11:03:57

您可以为“旋转木马”和“navbar”设置父级div，并添加以下样式-

.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 */
  }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48033179

复制

相似问题

问带肚脐、旋转木马和介绍的集装箱定位
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带肚脐、旋转木马和介绍的集装箱定位EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带肚脐、旋转木马和介绍的集装箱定位
EN