Question

假设容器中有三列，如果我最小化任何元素的宽度，那么相邻元素应该通过最大化它的宽度来覆盖该区域。 my live example on jsfiddle 我想要的是什么：
的 1。如果任何元素调整大小（最小化或最大化），则相邻元素应自动调整宽度
2.container具有固定尺寸，不应更改尺寸
3.元素必须自动适合容器
有没有办法使用处理程序，例如jQuery使用它的布局ui-resizable-handle

   <div id = "container">
      <div id = "element1"> </div>
      <div id = "element2"> </div>
      <div id = "element3"> </div>
    </div>


    #element1 {width:30%; height:100;}
    #element2 {width:40%; height:100;}
    #element3 {width:30%; height:100;}

Answer 1

我建议，删除＃element1,2,3中的填充，边距和边框。

也许这会有所帮助。

$(function() {

    var startwidth = 0;
    var containerwidth = $('#container').width();

    $('.resize').resizable({
        containment:'#container',
        start: function(){
            startwidth = $(this).width() / containerwidth;
        },
        stop: function(event, ui){
            var nsiblings = $(this).siblings().size();
            var delta = ($(this).width() / containerwidth  - startwidth);
            $(this).siblings().each(function(){
                var siblingswidth = ($(this).width() / containerwidth - delta / nsiblings) * containerwidth;
                $(this).width( siblingswidth );
            });
            var totalwidth = 0;
            $('#container').children().each(function(){
                totalwidth = totalwidth + $(this).width();
            });
            if(totalwidth > containerwidth){
                $(this).width($(this).width() - (totalwidth - containerwidth));
            }
        }
    });
});

如何使自动调整大小

1 个答案: