1

我有一个背景图像，上面有一个带有文本和图像的旋转木马，都是 1024x287 像素。我想在该图像下方添加更多信息，并在下方放置页脚。

我可以通过顶部的 px 边距来解决这个问题，但是一旦你调整了浏览器的大小，它看起来很糟糕。

我有以下标记：

.img-background {
  @media (max-width: 1035px) {
    display: none;
  }
  position:absolute;
  margin-left:50%;
  left:-512px;
  top:0px;
  width: 100%;
}

.infoblock {
  z-index: 2;
}

.carousel-control.right {
  left: auto;
  right: -50px;
}

.carousel-control.left {
  left: -100px;
  right: auto;
}

.carousel {
  position: absolute;
  margin-left: 50%;
  left: -512px;
  top: 60px;
  z-index: 2;
}

wrapper {
  position: relative;
  top: 60px;
  width: 100%;
  height: auto;
}

.carousel .item {
  width: 100%;
  /*slider width*/
  height: auto;
  /*slider height*/
  z-index: 2;
}

.carousel .item img {
  @media (max-width: 1035px) {
    display: none;
  }
  margin-left: 0%;
  width: 100%;
  /*img width*/
}

/*full width container*/

@media (max-width: 767px) {
  .block {
    margin-left: -20px;
    margin-right: -20px;
  }
}

@import 'bootstrap-responsive';
.navbar-inner {
  @include box-shadow(none !important);
  border: 0;
}

.navbar .nav>li>a {
  padding: 25px 10px 5px
}

.footer {
  color: $grayLight;
  a {
    color: $gray;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="block wrapper">

  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">

      <img class="img-background" src="assets/banner.png" alt="">
      <div class="active item">
        <img src="assets/banner_1.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_2.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_3.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_4.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_5.png" alt="">
      </div>
      <div class="item">
        <img src="assets/banner_6.png" alt="">
      </div>
    </div>
    <br>
    <div>
      <img class="img" src="assets/android.png" alt="">
    </div>
    <div>
      <img class="img" src="assets/iphone.png" alt="">
    </div>
    <img class="img" src="assets/landline.png" alt="">
    <div>
      <img class="img" src="assets/blackberry.png" alt="">
    </div>
    <div>
      <img class="img" src="assets/windows.png" alt="">
    </div>

  </div>

</section>
<script type='text/javascript'>
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 5000
    })

  });
</script>

这不应该是这样的：

EZ-呼叫主页

将 Android、iPhone 等徽标放在轮播中的问题在于，当您缩小浏览器的尺寸时，它们一直位于左侧，因此不可见。

如何在轮播下方放置一个 div，当屏幕很小时，轮播不显示，所以它应该只是在页面顶部。

4

1 回答 1

0

至少据我所知，你不能将两个相对定位的 DIV 放在一起。

您可以做的是在相对定位的 DIV 内使用图像的绝对定位。看看我之前制作的这个jsFiddle。

红色 DIV 是半透明的，位于蓝色 DIV 的顶部，使用position: absolute;, top: 0;,left: 0;将这两个放置在一个容器内<div class="container">，position: relative;并使margin: 0 auto;容器居中。

于 2013-09-02T02:58:32.230 回答