Помогите с версткой! Нужно сделать, чтобы боковой блок всегда оставался сбоку

TamTakoe, 583 просмотра

Есть 3-колонный макет: | 100px | auto | 30% | см. рисунок: http://i.minus.com/i9YJEP2wiRnV8.png
Блоки колонок | auto | 30% | должныследовать друг под другом парами. Но если в центрально колонке мало текста, то правая колонка прыгает под центральную, тогда как должна всегда оставаться справа.
Вот мой нехитрый код: http://jsfiddle.net/tamtakoe/Mydrn/5/

Целый день бьюсь. Как это победить?

Примечание:
Ничего не понятно. Как сделать согласование элементов в абсолютно позиционированных блоках? Как не разрывать блоки совсем? Можно с примером, хотя бы в том же http://jsfiddle.net

Примечание:
Если одна колонка задана в пикселях, а другая в процентах, то ширину третей никак не получится вычислить. Только в статичном макете, но тогда не было бы смысла задавать вопрос.

Ответы:

Shini

Проще всего поменять местами последние два дива в html-файлике. То есть
<div class="center">центральный блок что сила даёт большую проекцию на оси</div>
<div class="right">правый блок что сила даёт большую проекцию на оси, чем газообразный центр сил</div>
так.
Для более точного расположения можно создать три блока - наприме left, right и center, в них засунуть соответственные блоки с текстом и уже этим внешним блокам задавать положение.
left: { position: absolute; left: 0px; }
center: { position: absolute; left: 0px; rigth: 30%; }
right: { position: absolute; right: 0px; }

но ты проверь свою копию Smarty на всякий случай

а зачем вообще разрывать блоки ?! не разрывай их совсем! всю общую информацию складывай в них и будет всё ок

но ты проверь свою копию Smarty на всякий случай

http://jsfiddle.net/bPhKf/
Дополнение #1
в таких моделях нужно задавать ширину контейнера и каждой колонки в нём.
сомневаюсь, что планируется менять дизайн каждый день, поетому как вариант прикинь сколько будет занимать центральный блок в %.
в моём варианте кантейнер 500px, левый блок 100px (т.е. 20% съело, осталось 80), правый 30%, значит центральному остаётся максимум 50% от контейнера

13 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.