具有自动边距的 CSS div，在调整元素大小时不在滚动的 div 中居中

Question

我在另一个 div 中使用 overflow:auto 将 div 居中时遇到问题；一开始所有的 div 都以 margin: 0 auto; 为中心但是当我使用 jquery 调整最后一个 div 的大小时，会出现一个滚动条（如预期的那样），但其他 div 保持它们的位置，我希望所有 div 自动组织在滚动 div 的中心。

我调整 las div 的大小：

$('#boton').click(function(){
    $('.div2').css({width:'400px'});
});

我在这个小提琴中展示它，按下按钮调整大小：

http://jsfiddle.net/odabart/cAyVF/1/

编辑：

我不知道哪些 div 会被调整大小，所以我想只使用 css 来实现自动化，jquery 只是示例

Answer 1

您必须在所有 div1s 和 div2s 上添加一个包装器 div，并更改此包装器 div 的大小。 html 代码如下所示：

<div style='overflow:auto;width:200px;height:300px'>
    <div class="wrapper">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='boton' value="resize"/>

而 javascript 部分将包含一个新行：

$('#boton').click(function(){
    $('.div2, .wrapper').css({width:'400px'});
});

最好的问候。

Answer 2

黄色 div 以父元素的宽度为中心 (200px)。为了使所有 div 居中，您必须添加另一个 div 并使用 jQuery 调整该 div 的大小。

演示： http://jsfiddle.net/ahuvY/1/

HTML：

<div style='overflow:auto;width:200px;height:300px'>
    <div class="inner">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='boton' value="resize"/>

jQuery：

$('#boton').click(function(){
    $('.div2').css({width:'400px'}).parent().css({width:'400px'});
});

Answer 3

如果你想将黄色 div 自动居中到蓝色 div，我建议让你的 jQuery 触发包含 div 的宽度，并让蓝色 div 扩展以匹配。

根据要求更新

UPDATED JSFiddle sketch

jQuery

$('#boton').click(function(){
    $('.wrapper').css({width:'400px'});
});

HTML

<div class="frame">
    <div class="wrapper">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</div>
<input type='button' id='boton' value="resize"/>

CSS

.frame {
    overflow: auto;
    height: 300px;
    width: 200px;
}

.wrapper { width: 200px; }

.div1{
    width:100px;
    height:50px;
    background-color:yellow;
    margin: 0 auto;
    border:1px solid black;
    display:block;
}

.div2{
    width:100%;
    height:50px;
    background-color:blue;
    margin: auto;
    left: 0;
    position: relative;
    right: 0;
}