javascript - 根据两个元素的重叠宽度动态设置 padding-left

Question

我正在构建一个响应式网站，其中有两个相互重叠的元素。元素的大小将根据浏览器宽度而变化，重叠也会变化，因此我需要动态设置右侧元素的左填充。

我不确定如何继续此操作。已设立Fiddle here .

html:

    <div class="container">

<div class="row copy intro">
            <section class="red">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor illum nobis ullam neque, harum, magni. Reprehenderit veritatis in deleniti incidunt dolore dolores ex id expedita.</p>
                <p>Corporis soluta ducimus ut quasi libero nesciunt, eligendi autem, consequatur error sapiente labore, officia tempora in voluptas non deleniti veniam officiis, quis vero consequuntur quia!</p>


            </section>

            <section class="white">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor illum nobis ullam neque, harum, magni. Reprehenderit veritatis in deleniti incidunt dolore dolores ex id expedita.</p>

                <p>Corporis soluta ducimus ut quasi libero nesciunt, eligendi autem, consequatur error sapiente labore, officia tempora in voluptas non deleniti veniam officiis, quis vero consequuntur quia!</p>

            </section>
    </div>
</div><!--container-->

CSS:

/* line 3, ../build/sass/_intro.scss */
.intro {
  background: #0079c2;
  position: relative;
  padding: 15px;
  padding-bottom: 150px;
}
/* line 9, ../build/sass/_intro.scss */
.intro section {
  position: relative;
  padding: 100px;
  width: 60%;
  -moz-border-radius: 500px;
  -webkit-border-radius: 500px;
  border-radius: 500px;
}

/* line 26, ../build/sass/_intro.scss */
.intro section.red {
  background: rgba(238, 45, 36, 0.85);
  color: #fff;
  z-index: 200;
}
/* line 31, ../build/sass/_intro.scss */
.intro section.red h1 {
  font-size: 24px;
}

/* line 45, ../build/sass/_intro.scss */
.intro section.white {
  background: #fff;
  color: #0079c2;
  position: absolute;
  top: 150px;
  right: 15px;
}

js:

// set intro sections width = height
$(document).ready(function() {
  var circleWidth= $('.intro section.red').outerWidth();

  $('.intro section').css('min-height', circleWidth + 'px');
  $('.intro section.white').css('width', circleWidth + 'px');
});

感谢您的宝贵时间。

Answer 1

使用 % 进行填充并进行相应调整。请参阅this revised Fiddle举个例子。

修改后的Fiddle注释掉了:

$('.intro section.white').css('width', circleWidth + 'px');

固定白色圆圈的宽度意味着它不再响应。如果您出于某种原因需要这样做，则必须进行调整。