Элемент html с шириной в процентах должен иметь минимальную ширину внутреннего статического содержимого
Элемент html с шириной в процентах должен иметь минимальную ширину внутреннего статического содержимого
Здравствуйте, я пытаюсь создать гибкий / адаптивный макет. Есть ли способ заставить элемент HTML, который имеет процентную ширину, иметь минимальную ширину своего внутреннего содержимого? То есть, если его внутреннее содержимое имеет какую-то статическую ширину, например 200 пикселей?
Вот пример: http://www.nathanielkessler.com/div/csshelp.html
Если в IE9 вы установите его в режим "Причуды" и измените размеры окон в и из, он будет вести себя так, как я хочу. (обратите внимание, как второй div справа появляется под первым div слева, когда размер экрана изменяется внутрь).
Если вы вернете документ в режим стандартов IE9 и затем измените его размер внутрь, вы увидите, что внешняя граница div с красной рамкой не соответствует его внутреннему содержимому (желтая рамка). Я просто продолжаю сокращаться за пределы того, что должно быть его границей.
Есть ли способ заставить его вести себя так же, как в режиме причуд? (Без JavaScript)
2 ответа
Спасибо, в итоге я нашел довольно специфическую комбинацию CSS / HTML, которая дала мне то поведение, которое я преследовал. Работает во всех основных браузерах, включая ie7 до ie 9.
По сути, в ряду левых плавающих элементов, если вы зададите для первого элемента настройку min-width %, а для остальных элементов - комбинацию min-width % + width % ... вы получите плавный макет, который заставляет элементы падение под их родственные элементы, когда окно браузера сокращается.
Вот рабочий пример, попробуйте изменить размер браузера. http://www.nathanielkessler.com/div/cssfluid.html
Я думаю, что вы хотите, это min-width Атрибут CSS. Задавать .item { min-width: 200px; }