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

Я знаю, что @media может быть использован для обнаружения свойств всего видового экрана, а затем переключаться между наборами правил CSS, основанных на различных типах сред/ширина и т.п ..Как переключаться между наборами правил CSS, исходя из доступной ширины родителя (не ширины окна просмотра)?

Но как один переключатель между правилами CSS на основе ширина родительского div и т. д.?

Этот код предварительного просмотра колонтитул моей страницы, с некоторыми элементами изменены/удалены:

Liveweave:http://liveweave.com/JtUxpF(Переключить на Split V или View режим в верхнем меню)

enter image description here

на правой стороне нижнего колонтитула, есть небольшая форма (с красной стрелкой на картинке выше). Эта форма имеет @media разделение, примененных к нему, например так:

@media all and (min-width: 270px) { 
    /* Apply first set of CSS rules */ 
} 

@media not all and (min-width: 270px) { 
/* Apply second set of CSS rules */ 
}

Проблема:

Моя идея состояла в том, чтобы применить правила CSS на основе ширины доступной форме от родителя div , Однако в настоящее время правила CSS применяются на основе ширины экрана/окна просмотра.

Если вы уменьшите ширину окна до менее 270 пикселей, вы увидите визуальное изменение в образе формы!

Как я могу выбрать и применить между двумя различными наборами правил CSS, исходя из ширины, доступной для формы, вместо самой ширины видового экрана?

источник

2013-07-14 Ahmad

Я не могу представить ни одного способа в чистом css. Какие правила вы пытаетесь применить и почему? Возможно, есть другие способы решения этой проблемы. –

Я хочу, чтобы нижний колонтитул правильно отображался на устройствах с меньшей шириной (карманные компьютеры и т. Д.), Поэтому я хочу создать разные правила для этой формы. Это можно сделать, конечно, используя '@ media', но' @ media' читает всю ширину экрана, тогда как я хочу отделить правила CSS на основе ширины, доступной для формы, из ее родительского 'div'. Например, ширина экрана может быть 750 пикселей, но каждый столбец нижнего колонтитула получает 33% от этого, поэтому ширина, доступная для формы, составляет 250 пикселей, а не 750. Поскольку 250 меньше 270 (это мой порог), я хочу, чтобы CSS для изменения .. – Ahmad

Но это предсказуемо, не так ли? Если форма будет всегда составлять 33% ширины окна просмотра, то вы можете гарантировать, что значение в окне просмотра будет 810 (ish). –

Невозможно в чистом css. Эквиваленты операторов if if в css в настоящее время ограничены медиа-запросами и селекторами, ни один из которых не дает вам то, что вам нужно. Вы можете использовать что-то вроде less или sass, чтобы делать то, что вы пытаетесь сделать, или вы можете генерировать правила динамически, используя подход на стороне сервера или javascript.

дерзость: http://sass-lang.com/ меньше: http://lesscss.org

Существует некоторая поддержка по математике в CSS (известково()), но нет возможности не использовать их в качестве условных положений.

источник

2013-07-14 14:48:49

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

ответ

Смежные вопросы