0

Необходимо растягивать или сжимать группу блоков div разной ширины относительно ширины друг друга.

<div id="main" style="width:600px">
<div id="block1" style="display:inline-block; width:100px; max-width:100px;">блок 1</div>
<div id="block2" style="display:inline-block; width:200px; max-width:200px;">блок 2</div>
<div id="block3" style="display:inline-block; width:300px; max-width:300px;">блок 3</div>
</div>

Как это должно работать:
Если начать сжимать блок main, то первым должен сжиматься блок block3, так как он имеет самую большую ширину. Как только block3 достигнет ширины 200px, сжатие начнут производить уже 2 блока block2 и block3, пока оба блока не станут равны 100px. Затем сжиматься должны все три блока.

То же самое должно работать и при растягивании блока main до ограничения max-width для каждого блока.

Написал код, основанный на пропорциональном сжатии (через пропорциональное отношение длины блоков), но он не подходит. Нужно именно так, как я описал выше.

Заранее всем благодарен за любую помощь!

P.S. Ура! Задачу удалось решить!!!

Работающий пример здесь http://jsfiddle.net/3ym1c27L/8/ Буду рад вашим советам или комментариям.

HTML

<div id="main">
    <ul id="blocks">
        <li id="block0">Текст</li>
        <li id="block1">Текст 123</li>
        <li id="block2">Текст 1234567</li>
        <li id="block3">Текст 1234567890123456789</li>
        <li id="block4">Текст 1234567</li>
    </ul>
</div>

CSS

body {
    font-family: Arial;
    font-size: 14px;
}

#main {
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid red;
    font-size: 0;
    letter-spacing: 0;
    line-height: 0;
}

#blocks {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*border: 1px solid blue;*/
}

#blocks > li {
    display: inline-block;
    border: 2px solid black;
    margin: 0;
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: normal;
    line-height: normal;
    font-size: 14px;
}

JS

var main = $('#main');
var blocks = $('#blocks');
var blocks_real_width = blocks.width();
var blocks_li = blocks.find('li');
var min_width = 30; // минимальная ширина блока

// массив оригинальных размеров
// нужен для восстановления исходных размеров при растяжении
var array_real_width = [];
blocks_li.each(function(i){
    var w = $(this).width();
    array_real_width[i] = w;
});

$(window).on('resize', function(){
    var blocks_width = blocks.width();
    var r = blocks_width - main.width();
    if (r > 0 || blocks_real_width > blocks_width) {
        var blocks_move = move(r > 0 ? 0 : 1); // 0 - сжимаем, 1 - растягиваем
        if (blocks_move.length > 0) {
            r = Math.ceil(r / blocks_move.length);
            blocks_li.each(function(i){
                if (blocks_move[i] == 1) {
                    var w = $(this).width() - r;
                    if (w < min_width) w = min_width;
                    if (w > array_real_width[i]) w = array_real_width[i];
                    $(this).width(w);
                }
            });
        }
    }
});

function move(m) {
    var b = [], b_i, b_w, wo = 0, a = [];
    blocks_li.each(function(i){
        var w = $(this).width();
        a[i] = w;
        if ((m == 0 && w > wo && w > min_width) || (m == 1 && w < array_real_width[i])) {
            b_i = i;
            b_w = w;
        }
        wo = w;
    });
    if (b_i !== '') {
        b[b_i] = 1;
        $.each(a, function(i, w){
            if ((m == 0 && w >= b_w) || (m == 1 && w < array_real_width[i])) {
                b[i] = 1;
            }
        });
    }
    return b;
}

1 ответ 1

1

Попробуйте такой вариант.

HTML

<div id="main">
    <div id="block1">блок 1</div>
    <div id="block2">блок 2</div>
    <div id="block3">блок 3</div>
</div>

CSS

* {
    box-sizing: border-box;
}
#main {
    display: table;
    min-width: 300px;
    max-width: 600px;
    width: 100%;
    border-collapse: collapse;
}
#main > div {
    display: table-cell;
    min-width: 100px;
    height: 200px;
    border: 1px solid #999;
}
#block1 {
    width: 100px;
}
#block2 {
    width: 200px;
}
#block3 {
    width: auto;
}

JS

var third = $('#block3');
$(window).on('resize', function(){
    third.width( third.width() <= 200 ? 200 : 'auto');
});
2
  • В данном случае нужен цикл, так как блоков может быть много и они все могут быть разной длины. Видимо, готового решения нет, придется изобретать велосипед )))
    – Mouse
    18 мар 2015 в 7:43
  • Решение найдено jsfiddle.net/3ym1c27L/8
    – Mouse
    21 мар 2015 в 21:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.