веб-дизайн с тремя колонками и переменными сторонами

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

  •  09-06-2019
  •  | 
  •  

Вопрос

Я пытался придумать способ создать веб-дизайн с тремя столбцами, где центральный столбец имеет постоянную ширину и всегда центрирован.Столбцы слева и справа являются переменными.Это тривиально в таблицах, но неверно семантически.Мне не удалось заставить это работать должным образом во всех современных браузерах.Есть какие-нибудь советы по этому поводу?

Это было полезно?

Решение

Использование эта техника, и просто укажите фиксированную ширину для центрального столбца.

Другие советы

Посмотри на это: http://www.glish.com/css/2.asp

И замените ширину:xx% для #maincenter по фиксированному значению.Кажется, работает, когда я меняю его с помощью Firebug, стоит попробовать?

#maincenter {
    width: 200px;
    float:left;
    background:#fff;
    padding-bottom:10px;
    }

Я думаю, вам нужно было бы начать с начальной (фиксированной) ширины для обоих столбцов боковой панели, а затем, когда страница загрузится, использовать javascript, чтобы получить ширину окна и вычислить новую ширину боковых панелей.

ширина боковой панели = (ширина окна - ширина центральной колонки) / 2

Затем вы могли бы повторно применить javascript, если размер окна будет изменен.

Эта статья в Отдельном списке имеет решение, приводящее к макету из 3 столбцов, который будет :

  • имеют плавный центр с боковыми панелями фиксированной ширины,

  • разрешить центральному столбцу появляться первым в источнике,

  • позвольте любой колонне быть самой высокой,

  • требуется только один дополнительный div разметки, и

  • требуется очень простой CSS, с минимальными исправлениями.

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