Комментарии 21
А про
min-width напишите?НЛО прилетело и опубликовало эту надпись здесь
Да, меня тоже немного напрягло что в CSS 2.1 всё не так досконально прописано и даже IE умудряется выдать хороший результат.
Table-layout: fixed; конечно пуленепробиваемый вариант, но слишком скучный, с ним особо непоэкспериментируешь :)
Кстати, если в твоём примере убрать max-width и посмотреть на вариант с шириной 10 и 5 % то правый блок себя вообще ведёт непонятно как.
Table-layout: fixed; конечно пуленепробиваемый вариант, но слишком скучный, с ним особо непоэкспериментируешь :)
Кстати, если в твоём примере убрать max-width и посмотреть на вариант с шириной 10 и 5 % то правый блок себя вообще ведёт непонятно как.
НЛО прилетело и опубликовало эту надпись здесь
Тут точно замешана MCW, но ещё и каким-то странным образом влияет фактическая ширина ячейки. Даже когда не хватает места браузер всё-равно пытается как-то укоплектовать контент и тут как раз видно что фактическая ширина левой ячейки тоже влияет на увеличение правой.
jsfiddle.net/CyberAP/NUHTk/17/
jsfiddle.net/CyberAP/NUHTk/17/
Сделал пример со сравнением фактических процентов и тех, что получаются в непомещающихся ячейках, плюс MCW для примера. Ясности всё-равно нет :)
jsfiddle.net/CyberAP/NUHTk/21/
jsfiddle.net/CyberAP/NUHTk/21/
Пока что главная особенность — это процентные величины. Если задать размеры в пикселях то такого эффекта уже не будет.
НЛО прилетело и опубликовало эту надпись здесь
Я вроде как разгадал механизм работы. Если не задавать никакой ширины то ячейки примут оптимальную ширину (OCW), то есть весь инлайн идёт в одну строчку, но это не MCW, который максмально компактно ужимает контент. Факт в том что процентная ширина высчитывается исходя не из размеров родителя, а из OCW с какой-то специальной формулой, насколько я это вижу.
Ширина 50% у одной ячейки или 0% у обеих = 100% OCW.
Ширина 0% и более у одной >= MCW.
Ширина ниже 50% увеличивает ширину соседней ячейки на ровно такое же количество которое убавили от 50, при этом надо учитывать что берётся процент от OCW. Допустим левая 40%, значит правая теперь 60% OCW, хотя это и не прописано в её свойствах. Вопрос лишь в формуле рассчёта этого процента, потому что он явно не такой простой, до 80% рост вообще никакой, а после сразу очень резкий. И вот как только мнимая обёртка display: table; по ширине достигает ширины контейнера эти ячейки начинают вести себя как положено.
И это только вариант когда я изменяю ширину одной ячейки.
Можешь проверить, поставь у обеих ячеек ширину 2%, их ширина никак не зависит от контейнера. А потом обе ширины можно увеличивать вполть до 50% пока обе ячейки не примут размеры OCW. После 50% произойдёт магия, получается что левая ячейка растёт и так, а правая добавляет ей в размерах, исходя из правила выше. То есть тот кто левее и будет расти в первую очередь, если размеры мнимой табличной обёртки превышают размеры контейнера.
Ширина 50% у одной ячейки или 0% у обеих = 100% OCW.
Ширина 0% и более у одной >= MCW.
Ширина ниже 50% увеличивает ширину соседней ячейки на ровно такое же количество которое убавили от 50, при этом надо учитывать что берётся процент от OCW. Допустим левая 40%, значит правая теперь 60% OCW, хотя это и не прописано в её свойствах. Вопрос лишь в формуле рассчёта этого процента, потому что он явно не такой простой, до 80% рост вообще никакой, а после сразу очень резкий. И вот как только мнимая обёртка display: table; по ширине достигает ширины контейнера эти ячейки начинают вести себя как положено.
И это только вариант когда я изменяю ширину одной ячейки.
Можешь проверить, поставь у обеих ячеек ширину 2%, их ширина никак не зависит от контейнера. А потом обе ширины можно увеличивать вполть до 50% пока обе ячейки не примут размеры OCW. После 50% произойдёт магия, получается что левая ячейка растёт и так, а правая добавляет ей в размерах, исходя из правила выше. То есть тот кто левее и будет расти в первую очередь, если размеры мнимой табличной обёртки превышают размеры контейнера.
А просто одна ячейка вообще даёт просто потрясающий результат. jsfiddle.net/CyberAP/NUHTk/13/
НЛО прилетело и опубликовало эту надпись здесь
Очень интересный момент, спасибо за наблюдательность и этот пост
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Контролируем переполнение ячейки таблицы с помощью max-width