Введение в статью Wulin.com (www.vevb.com): CSS3+HTML5 Примечания 4-CSS Трехколонна.
В прошлом, выполняя трехколонный макет, наиболее распространенным и самым простым методом может быть: использование Float+Margin для его реализации. В эпоху CSS3 у нас может быть еще один модный метод, который является моделью коробки в CSS3, со следующим образом:
CSS3 Трехколонный макет CSS3 Трехколонный макет MiddleleftrightЭффект операции под Google Chrome заключается в следующем:
Резюме: атрибут Box-Flex в основном используется здесь. Этот атрибут в основном позволяет детскому контейнеру разделять ширину в соответствии с определенными правилами относительно родительского контейнера. Если три детских контейнера устанавливают значение с флексом коробки на 1, 2 и 3 соответственно, три детских контейнера разделит ширину в соответствии с соотношением 1: 2: 3.
Конечно, родительский контейнер должен быть установлен как модель коробки, чтобы увидеть эффект, например, дисплей: -Webkit-box; дисплей: -moz-box;
Однако, если вы запускаете вышеуказанный код напрямую, в Chrome нет проблем, но когда дело доходит до Firefox, он становится следующим:
, это ошибка Firefox? Первоначально ширина на левой и правой сторонах была фиксирована, но ширина в середине не имела адаптивной ширины. После общения с автором «авторитетного руководства по HTML5 и CSS3» я понял, что эта ситуация возникает, потому что ширина родительского контейнера не установлена. Просто добавьте ширину: 100% в родительский контейнер. Полем Полем Спасибо автору "HTM5 и CSS3 авторитетного руководства" ...