Question

是否有可能扩展div，left和right而不是另一个SO问题的答案，这个问题只会向右和向下扩展......

欢呼声

Answer 1

当然是。

<强>结构

您需要将父容器设置为position: relative;，并将实际div设置为position: absolute;

通过这种方式，您可以毫无顾虑地修改div的位置。这应该作为一个起点。您可以看到子div与父级相比向上和向左移动。

<style>
    .parent { 
       position: relative;
       width: 200px;
       height: 200px;
       background: yellow;
       margin: 40;
     }
     .child {
         position: absolute;
         top: -10px;
         left: -10px;
         width: 100px;
         height: 100px;
         background: red;

     }
</style>

<div class="parent">
    <div class="child">

    </div>
</div>

<强>扩展

因此，对于实际的扩展，您必须设置动画/更改左/顶部位置以及框的宽度和高度。

对于每1px你移动你的盒子，你必须增加2px的宽度！进行均衡扩张。

$('.child').animate({'left' : '-=10px', 'width' : '+=20px'});

向左+向右展开DIV

1 个答案: