Элемент html с шириной в процентах должен иметь минимальную ширину внутреннего статического содержимого

Question

HTML-элемент с шириной в процентах должен иметь минимальную ширину его внутреннего статического содержимого

Здравствуйте, я пытаюсь создать гибкий / адаптивный макет. Есть ли способ заставить элемент HTML, который имеет процентную ширину, иметь минимальную ширину своего внутреннего содержимого? То есть, если его внутреннее содержимое имеет какую-то статическую ширину, например 200 пикселей?

Вот пример: http://www.nathanielkessler.com/div/csshelp.html

Если в IE9 вы установите его в режим Quirks и измените размер окна, то он будет работать так, как я хочу. (обратите внимание, как второй div справа появляется под первым div слева, когда размер экрана изменяется внутрь).

Если вы вернете документ в режим стандартов IE9, а затем измените его размер внутрь, вы увидите, что внешняя граница div с красной рамкой не соответствует его внутреннему содержимому (желтая рамка). Я просто продолжаю сокращаться за пределы того, что должно быть его границей.
Есть ли способ заставить его вести себя так же, как в режиме причуд? (Без JavaScript)

Answer 1

Спасибо, в итоге я нашел довольно специфическую комбинацию CSS / HTML, которая дала мне то поведение, которое я преследовал.Работает во всех основных браузерах, в том числе от 7 до 9 *.

По существу, в ряду левых плавающих элементов, если вы задаете для первого элемента настройку min-width%, а для остальных элементов - комбинацию min-width% + width% ... вы получаете плавный макет, который заставляет элементы помещаться под их родственные элементы при уменьшении окна браузера.

Вот рабочий пример, попробуйте изменить размер браузера.http://www.nathanielkessler.com/div/cssfluid.html

Answer 2

Я думаю, что вам нужен атрибут min-width CSS. Комплект .item { min-width: 200px; }