Как реализовать частично гибкий макет экрана с помощью сетки?

StackOverflow https://stackoverflow.com/questions/8327794

  •  26-10-2019
  •  | 
  •  

Вопрос

Я пытаюсь реализовать следующий макет экрана, используя сетку CSS (план), но безуспешно:

enter image description here

Как достичь этого с помощью сетки? У кого -нибудь есть пример кода 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/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top