css - трехколоночная - трехколоночный макет htmlbook




Трехколонный CSS-макет-фиксированный/макс./Переменная ширина (2)

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

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

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

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

Где:

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

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

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

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






variable-width