jquery resize()将多个动态宽度div

时间:2017-01-04 23:03:06

标签: javascript jquery html

以下是这种情况:

我有3个全宽度部分,它们具有垂直居中的标题和左对齐的按钮div。 当我们调整大小时,我想将按钮居中,当前位置是绝对的。

以下是我的想法: 调整窗口大小

  1. 捕获外部分区的宽度
  2. 捕获内部分割的宽度
  3. 从外部减去内部以确定剩余空间
  4. 将剩余剩余部分划分为2个相等的边距
  5. 使用.css()应用内部分区两侧的边距。
  6. 这就是我根据这个想法编写的内容。

    jQuery( window ).resize(function() {
    
        var parentWidth = 
        $( ".search__btn--wrapper" ).parent().width();
    
        var childWidth = 
        $( ".search__btn--wrapper" ).width();
    
        var marginWidth =
            parentWidth - childWidth;
    
        var halfWidth = 
            marginWidth/2;
    
        $( ".search__btn--wrapper" ).css("left" , halfWidth);
        $( ".search__btn--wrapper" ).css("right" , halfWidth);
    
        console.log('width is now' + $( window ).width() );
        console.log('parent of button element width:' + parentWidth );
        console.log('button element width:' + childWidth );
        console.log('leftover margins' + marginWidth );
        console.log('needed margins' + halfWidth );
    
    });
    

    问题到目前为止 即使我能够在每个调整大小时获得外部和内部的宽度,但由于某种原因, marginWidth 变量不会更新。 halfWidth

    也是如此

    我也试图动态地为每个人而不仅仅是第一个工作,但那个次要的,我觉得只需要某种.each()循环。

    虽然第一部分我缺少什么? 我觉得这很简单,我只是忽略了:<

1 个答案:

答案 0 :(得分:0)

我不明白你需要在jQuery中编写代码而不是CSS。您可以将div相对的绝对div居中:

position:absolute;
left:0;
right:0;
margin:0 auto;