Question

我正在使用水平滚动网站，并希望根据前一个元素的宽度总和为元素设置左边距。但是直到 class =“block-5”的元素才能正常工作，之后它会为左边带来太大的价值。没有准确地解决问题。

HTML

<div id="scroll-main-wrapper" class="container main-wrapper">
      <div class="common-wrapper block-1" width="230">
        <div style="background-image: url(images/img.png);">
          <h1>Some Heading</h1>
        </div>
      </div>
      <div class="common-wrapper block-2" width="546">
        <div class="row">
          <div class="col-md-12">
            <div class="img-wrapper">
              <div class="img" style="background-image: url(images/groom.jpg);">
              </div>
            </div>
            <div class="img-wrapper">
              <div class="img" style="background-image: url(images/bride.jpg);">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="common-wrapper block-3" width="230">
        <img src="images/pattern.png" alt="pattern">
      </div>
      <div class="common-wrapper block-4 text-center" width="286">
        <img src="images/img-bg.png" alt="bg-img" class="img-responsive">
        <p class="title">Title</p>
      </div>
      <div class="common-wrapper block-5" width="1578">
        <div class="vertically-center">
          <div class="row">
            <div class="col-md-12">
              <img src="images/img.png" alt="bg-img" class="img-responsive">
              <p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <img src="images/img.png" alt="bg-img" class="img-responsive">
              <p class="chapter-title">Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="common-wrapper block-6" width="740">
        <div class="row">
          <div class="col-md-12">
            <img src="images/img.png" alt="bg-img">
            <p>Lorem ipsum dolor sit amet</p>
          </div>
        </div>
      </div>
      <div class="common-wrapper block-7 text-center" width="230">
        <img src="images/img.png" alt="bg-img" class="img-responsive">
      </div>
    </div>

JQUERY

var left = 0;
  $('#scroll-main-wrapper .common-wrapper').each(function() {
    $(this).css('left', left);
    left += $(this).outerWidth() + 40;
  });

CSS

.common-wrapper {
  position: absolute;
  top: 62px;
  bottom: 0px;
  min-width: 230px;
  padding: 10px 0px;
  border: 1px rgba(244, 200, 113, 0.3) solid;
}

RESULT

    <div id="scroll-main-wrapper" class="container main-wrapper">
  <div class="common-wrapper block-1" style="left: 0px;">
    <div style="background-image: url(images/img.png);">
      <h1>Some Heading</h1>
    </div>
  </div>
  <div class="common-wrapper block-2" style="left: 270px;">
    <div class="row">
      <div class="col-md-12">
        <div class="img-wrapper">
          <div class="img" style="background-image: url(images/groom.jpg);">
          </div>
        </div>
        <div class="img-wrapper">
          <div class="img" style="background-image: url(images/bride.jpg);">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="common-wrapper block-3" style="left: 856px;">
    <img src="images/pattern.png" alt="pattern">
  </div>
  <div class="common-wrapper block-4 text-center" style="left: 1126px;">
    <img src="images/img-bg.png" alt="bg-img" class="img-responsive">
    <p class="title">Title</p>
  </div>
  <div class="common-wrapper block-5" style="left: 1452px;">
    <div class="vertically-center">
      <div class="row">
        <div class="col-md-12">
          <img src="images/img.png" alt="bg-img" class="img-responsive">
          <p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <img src="images/img.png" alt="bg-img" class="img-responsive">
          <p class="chapter-title">Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="common-wrapper block-6" style="left: 7096px;">
    <div class="row">
      <div class="col-md-12">
        <img src="images/img.png" alt="bg-img">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
  <div class="common-wrapper block-7 text-center" style="left: 8040px;">
    <img src="images/img.png" alt="bg-img" class="img-responsive">
  </div>
</div>

提前致谢。：）

Answer 1

更改为html width至style="width:"

<div id="scroll-main-wrapper" class="container main-wrapper">
      <div class="common-wrapper block-1" style="width:230px;">
        <div style="background-image: url(images/img.png);">
          <h1>Some Heading</h1>
        </div>
      </div>
      <div class="common-wrapper block-2" style="width:546px;">
        <div class="row">
          <div class="col-md-12">
            <div class="img-wrapper">
              <div class="img" style="background-image: url(images/groom.jpg);">
              </div>
            </div>
            <div class="img-wrapper">
              <div class="img" style="background-image: url(images/bride.jpg);">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="common-wrapper block-3" style="width:230px;">
        <img src="images/pattern.png" alt="pattern">
      </div>
      <div class="common-wrapper block-4 text-center" style="width:286px;">
        <img src="images/img-bg.png" alt="bg-img" class="img-responsive">
        <p class="title">Title</p>
      </div>
      <div class="common-wrapper block-5" style="width:1578px;">
        <div class="vertically-center">
          <div class="row">
            <div class="col-md-12">
              <img src="images/img.png" alt="bg-img" class="img-responsive">
              <p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <img src="images/img.png" alt="bg-img" class="img-responsive">
              <p class="chapter-title">Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="common-wrapper block-6" style="width:740px;">
        <div class="row">
          <div class="col-md-12">
            <img src="images/img.png" alt="bg-img">
            <p>Lorem ipsum dolor sit amet</p>
          </div>
        </div>
      </div>
      <div class="common-wrapper block-7 text-center" style="width:230px;">
        <img src="images/img.png" alt="bg-img" class="img-responsive">
      </div>
    </div>

https://jsfiddle.net/n6aaz3o7/3/

设置边距等于前一个元素宽度的总和

1 个答案: