Как реализовать частично гибкий макет экрана с помощью сетки?
-
26-10-2019 - |
Вопрос
Я пытаюсь реализовать следующий макет экрана, используя сетку CSS (план), но безуспешно:
Как достичь этого с помощью сетки? У кого -нибудь есть пример кода CSS/HTML, чтобы поделиться? Спасибо.
PS: Причина, по которой я хочу использовать структуру, состоит в том, чтобы убедиться, что этот макет работает во всех браузерах (любой Безопасно Структура в порядке, это не обязательно должен быть план).
Решение 2
После того, как я углубился в эту проблему, я понял, что невозможно решить его с помощью сетки. Проблема в том, что пара высот и ширины производит друг друга. Более того, в зависимости от содержания «центральной» ячейки, слайд -стержни также могут появиться.
Я нашел длинное решение с участием какого -то JavaScript. Сначала я определяю различные клетки моего экрана с DOV в моем HTML. Затем я получаю ширину и высоту документа и устанавливаю ширину и высоту ячеек, используя jQuery. Я начинаю со значения исправления, затем простые производные, затем сложные производные.
Для выпуска слайд -бар я использовал трюк, объясненный здесь. Анкет Я корректирую размер центрального столбца в соответствии с наличием слайд -стержня, которая сама зависит от высоты «центральной» ячейки, которая сама зависит от ширины экрана.
Другие советы
Ямл должен быть в состоянии этого: http://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_faux_columns.html
Или, может быть, жидкость 960?http://designinfluences.com/fluid960gs/