文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >设置左边等于先前元素宽度之和的边距

问设置左边等于先前元素宽度之和的边距
EN

Stack Overflow用户
提问于 2016-01-18 06:20:11
回答 1查看 55关注 0票数 1

我正在水平滚动网站上工作，并希望根据先前元素的宽度和设置元素的左边距。但是，直到元素与class="block-5"，它的工作良好，并在那之后，它采取了太多的价值左。不知道到底出了什么问题。

代码语言：javascript
复制
<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

代码语言：javascript
复制
var left = 0;
  $('#scroll-main-wrapper .common-wrapper').each(function() {
    $(this).css('left', left);
    left += $(this).outerWidth() + 40;
  });

CSS

代码语言：javascript
复制
.common-wrapper {
  position: absolute;
  top: 62px;
  bottom: 0px;
  min-width: 230px;
  padding: 10px 0px;
  border: 1px rgba(244, 200, 113, 0.3) solid;
}

结果

代码语言：javascript
复制
    <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>

提前谢谢。:)

css
javascript
jquery
html
EN

回答 1

Stack Overflow用户

发布于 2016-01-18 06:43:38

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

代码语言：javascript
复制
<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/

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

https://stackoverflow.com/questions/34848359

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档