Трехколонный веб-дизайн с переменными сторонами
Я пытался придумать способ создать веб-дизайн с 3 столбцами, в котором центральный столбец имеет постоянную ширину и всегда по центру. Столбцы слева и справа переменные. Для таблиц это тривиально, но семантически неверно.
Мне не удалось заставить это работать должным образом во всех текущих браузерах. Какие-нибудь советы по этому поводу?
Ответы 4
Используйте эта техника и просто укажите фиксированную ширину для центрального столбца.
Я получаю 404, когда пытаюсь проверить эту ссылку ... вам нужно отредактировать html?
Спасибо что подметил это. Страница по какой-то причине переместилась с .html на .htm. Я обновил ссылку сейчас.
Я думаю, вам нужно начать с начальной (фиксированной) ширины для обоих столбцов боковой панели, а затем, когда страница загружается, использовать javascript, чтобы получить ширину окна и вычислить новую ширину боковых панелей.
ширина боковой панели = (ширина окна - ширина центрального столбца) / 2
Затем вы можете повторно применить javascript, если размер окна изменится.
Я предполагаю, что это будет зависеть от того, хотите ли вы, чтобы ваш сайт отображался так же, когда люди отключают javascript. Но это другой вопрос.
Проверьте это: http://www.glish.com/css/2.asp
И замените width: xx% для #maincenter фиксированным значением. Кажется, работает, когда я меняю его с помощью Firebug, стоит попробовать?
#maincenter {
width: 200px;
float: left;
background: #fff;
padding-bottom: 10px;
}
+1 спасибо чувак. Потому что Ваш комментарий привык ко мне отсюда (stackoverflow.com/questions/2630430/…).
Эта статья в A List Apart имеет решение, приводящее к трехколоночной компоновке, которая:
иметь плавный центр с боковыми панелями фиксированной ширины,
позволить центральному столбцу появиться первым в источнике,
позволить любой колонне быть самой высокой,
требуется только один дополнительный div разметки, и
требуется очень простой CSS с минимальными исправлениями.
Спасибо, похоже, это сработало. Теперь я пойму, зачем вам столько вложенных div.