Блог

Главная - Вопросы по программированию - Почему родственные divs переходят на новую строку при изменении размера?

Почему родственные divs переходят на новую строку при изменении размера?

#javascript #jquery #html #css #jquery-ui-resizable

#javascript #jquery #HTML #css #jquery-ui-resizable

Вопрос:

У меня есть несколько divs в контейнере div, вот так:

 <div id="container">
    <div class="resizable"></div>
    <div class="resizable"></div>
</div>

и они должны быть изменяемыми по размеру. С помощью jQuery я мог бы добиться изменения размера, но теперь я нашел «вещь».

Когда я изменяю размер любого столбца, если один или несколько родственных элементов достигают предела «контейнера», они переходят на новую строку вместо того, чтобы останавливать изменение размера. Вы можете увидеть пример здесь.

Я хочу остановить изменение размера, когда младший брат достигнет родительского предела. Я пробовал это так много раз, и нет ни одного сообщения, в котором говорилось бы об этом, и ни одно из сделанных мной обходных решений не сработало.

Комментарии:

1. Если вы превысите ограничение ширины родительского элемента, они, конечно, переместятся ниже.

2. Да, но он использует родительский элемент в качестве элемента сдерживания containment: '#container' .

3. И как мне сообщить элементу, чтобы он остановил изменение размера, когда какой-либо из его родственных элементов достигает предела??

Ответ №1:

Я добавил white-space: nowrap; в ваш контейнер, чтобы предотвратить разрушение элементов.

Теперь, чтобы управлять вашим изменением размера на основе нескольких элементов, все, о чем я могу думать, это добавить js threatment к событию изменения размера, указывающее сохранять размер, когда сумма дочерней ширины достигает родительской ширины, вот так:

 $('.resizable').resizable({
    handles: 'e',
    containment: '#container',
    resize: function( event, ui ) {
        var parent = ui.element.parent();
        var cw = 0;
        ui.element.siblings().each(function() {
            cw  = $(this).width();
        });

        if(parent.width() <= cw   ui.element.width()) {
            ui.element.width(
                parent.width() - cw
            );
        }
    }
});

Это сохранит все элементы внутри ограничения контейнера. Вам просто нужно разобраться с заполнением между вашими элементами, которые из-за inline-block

Вот в чем проблема:http://jsfiddle.net/Yz9K2/2 /