Question

以下是这种情况：

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

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

捕获外部分区的宽度
捕获内部分割的宽度
从外部减去内部以确定剩余空间
将剩余剩余部分划分为2个相等的边距
使用.css（）应用内部分区两侧的边距。

这就是我根据这个想法编写的内容。

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()循环。

虽然第一部分我缺少什么？我觉得这很简单，我只是忽略了：＆lt;

Answer 1

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

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

jquery resize（）将多个动态宽度div

1 个答案: