Трехколоночный CSS-макет-исправлено / макс./переменная ширина

У меня возникли проблемы с получением следующего макета из трех столбцов для работы:

    A              B              C
+-------+-------------------+------------+
|       |                   |            |
| Fixed | Use unused space  |  Resizable |
|       |                   |            |
+-------+-------------------+------------+

где:

  • A фиксированная ширина.
  • B использует любое доступное пространство в контейнере, не используемое столбцами A и C.
  • C содержит содержимое, которое может изменить ширину и нужно "нажать" B на a разная ширина.

вот моя лучшая попытка создания этот: http://jsfiddle.net/x3ESz/

все другие темы, которые я рассматривал, предлагают иметь все три как плавающие с B, используя поля для предотвращения обертывания, но это не позволяет C изменять размер B на основе содержимого C (поскольку значение должно быть задано для правого поля B).

Я также очень хочу избежать обращения к JS для достижения этого.

8
css css-float layout variable-width

3 ответов

Это можно легко решить с помощью добавлять overflow: hidden to #div_middle и удаление полей:

#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}

посмотреть: http://jsfiddle.net/thirtydot/x3ESz/1/

это работает во всех современных браузерах и IE7+.

17

вы можете исправить это без изменения макета, если вы используете этот скрипт:

$(document).ready(function() {
    $('#div_right').click(function() {
        $(this).append('--');
        $('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px");
    });
});
0

даже работает с обеими боковыми панелями переменной ширины:

http://jsfiddle.net/QG2EU/

#div_left{
    float:left;
    border:1px solid #F00;
}
#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}
#div_right {
    float:right;
    border:1px solid #00F;
}
0