Question

我有一个问题，在另一个div中使用overflow：auto;在开始时所有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

你必须在所有div1和div2上添加一个包装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;
}

CSS divs with margin auto，在调整元素大小时不以滚动div为中心

3 个答案: