主页 / 问题 / 603412
Accepted
drtvader
Asked:2020-12-14 17:49:34 +0000 UTC2020-12-14 17:49:34 +0000 UTC

如何在不更改 html 的情况下调整大小时使指示条保持其在图像上的位置？

  • 772

如何做到这一点，给出了一个例子

.b-about__carousel-inner {
  height: auto;
  position: relative;
}
.b-about .carousel-fade .carousel-inner .active {
  opacity: 1;
  position: relative;
}
.b-about__indicator-list {
  margin-top: -54px;
  width: 100%;
  top: 50%;
  bottom: auto;
  margin-top: -74px;
  position: absolute;
}
.b-about__indicator-list li {
  width: 17px;
  height: 2px;
  margin: 0 3px;
  background-color: #cfcfcf;
  border: 0;
  border-radius: 0;
}
.b-about__indicator-item.active {
  width: 17px;
  height: 2px;
  margin: 0 3px;
  background-color: #ed454b;
  margin: 0 6px;
}
.b-about__container-image {
  height: auto;
  width: 100%;
  background-color: #e6e6e6;
  text-align: center;
  position: relative;
}
.b-about__image {
  display: block;
  width: 100%;
}
.b-about__information {
  padding: 91px 15px 0 25px;
  margin: 0 auto;
  height: 300px;
}
<div role="listbox" class="b-about__carousel-inner carousel-inner">
  <div class="active b-about__item item">
    <div class="b-about__container-image">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD60q-ZK6Jnex3EvBk8tjS205SgzGkqzCQ0qDhgy-D84lrtTax151OVPs" alt="" title="" class="b-about__image">
    </div>
    <div class="b-about__information">
      <h2 class="b-title b-title--about">Двигатель</h2>
      <div class="b-about__text-about">
        <p>Надежный, прочный и&nbsp;экономичный 4-цилиндровый двигатель</p>
      </div>
    </div>
  </div>




  <!-- Controls-->

  <ol class="b-about__indicator-list carousel-indicators">
    <li data-target="#about" data-slide-to="0" class="active b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="1" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="2" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="3" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="4" class="b-about__indicator-item"></li>
  </ol>
</div>

css

2 个回答

  1. Best Answer

    如果需要相对于图片底部的位置，则设置相对于底部，即bottom. 然而，在这种情况下，没有必要margin为绝对定位的元素指定，尽管在某些情况下这是合适的。如果容器具有固定大小，则以像素为单位指定单位，如果容器是橡胶，则以百分比为单位。

    一般建议：少用像74px.

    • 1

  2. 如果不更改 html，则仅将 javascript 设置top为您的指示器等于图像的高度，并margin-top负向下方所需的缩进

    var imgHeight = $('.b-about__container-image').height()
$('.b-about__indicator-list').css('top', imgHeight);

$(window).on('resize', function(){
  imgHeight = $('.b-about__container-image').height()
  $('.b-about__indicator-list').css('top', imgHeight);
});
    .b-about__carousel-inner {
  height: auto;
  position: relative;
}
.b-about .carousel-fade .carousel-inner .active {
  opacity: 1;
  position: relative;
}
.b-about__indicator-list {
  width: 100%;
  margin-top: -50px;
  position: absolute;
}
.b-about__indicator-list li {
  width: 17px;
  height: 2px;
  margin: 0 3px;
  background-color: #cfcfcf;
  border: 0;
  border-radius: 0;
}
.b-about__indicator-item.active {
  width: 17px;
  height: 2px;
  margin: 0 3px;
  background-color: #ed454b;
  margin: 0 6px;
}
.b-about__container-image {
  height: auto;
  width: 100%;
  background-color: #e6e6e6;
  text-align: center;
  position: relative;
}
.b-about__image {
  display: block;
  width: 100%;
}
.b-about__information {
  padding: 91px 15px 0 25px;
  margin: 0 auto;
  height: 300px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div role="listbox" class="b-about__carousel-inner carousel-inner">
  <div class="active b-about__item item">
    <div class="b-about__container-image">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD60q-ZK6Jnex3EvBk8tjS205SgzGkqzCQ0qDhgy-D84lrtTax151OVPs" alt="" title="" class="b-about__image">
    </div>
    <div class="b-about__information">
      <h2 class="b-title b-title--about">Двигатель</h2>
      <div class="b-about__text-about">
        <p>Надежный, прочный и&nbsp;экономичный 4-цилиндровый двигатель</p>
      </div>
    </div>
  </div>




  <!-- Controls-->

  <ol class="b-about__indicator-list carousel-indicators">
    <li data-target="#about" data-slide-to="0" class="active b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="1" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="2" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="3" class="b-about__indicator-item"></li>
    <li data-target="#about" data-slide-to="4" class="b-about__indicator-item"></li>
  </ol>
</div>

    因此，一般来说，您需要将指标转移到b-about__container-image并冷静地向他指示所需的bottom

    • 0

相关问题