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

少なくとも私の知る限り、相対的に配置された 2 つの DIV を互いの上に配置することはできません。

あなたができることは、相対的に配置されたDIV内で、画像の絶対配置を使用することです。以前に作成したこのjsFiddleを見てください。

赤の DIV は半透明で、青の DIV の上に 、 、 を使用して、position: absolute;これら2 つをコンテナの内側に配置し、コンテナを中央に配置します。top: 0;left: 0;<div class="container">position: relative;margin: 0 auto;

于 2013-09-02T02:58:32.230 に答える