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');

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

Answer 2

这是一个JSFiddle做我认为你想要的：http://jsfiddle.net/6yro5vhx/2/

基本上我用户偏移（）＆amp;两个元素上的outerWidth（）计算出重叠，然后在documentready＆amp;上调用calculatePadding（）函数。调整事件大小。

  function calculatePadding() {
   var white = $('.intro section.white');
   var red = $('.intro section.red');
   var extraPadding = 20;
   var distanceLeft = white.offset().left;
   var redDistanceRight = red.offset().left + red.outerWidth();
   var paddingLeft = (redDistanceRight - distanceLeft) + extraPadding;

   $('.intro section.white').css('padding-left', paddingLeft + 'px');    
  }

更新我的下面的答案是实现您正在寻找的更好的方法。 CSS是一种比过多的JQuery更好的响应方法。

根据两个元素的重叠宽度动态设置填充左侧

2 个答案: