Как расположить блоки в html?

malek, 79 просмотров

На странице есть два блока. Надо, чтобы на экране они располагались рядом, а на печати - один под другим. Вот картинка:
http://pic.ipicture.ru/uploads/080923/22141/DgFgUC0BJG.jpg
Если в коде идёт сначала синий блок, а потом красный, — они на печати будут не в том порядке. А если сначала красный, потом синий, — почему-то никакими float-ами не получается на экране сделать что надо.
Что делать?

Примечание:
Невидимка, по-моему, это неприлично. Страница должна печататься, когда ctrl-p или что-то в этом роде жмут.

Примечание:
kmike, а вы умеете css-ом менять порядок блоков?

Примечание:
Эх, дурная система не даёт дополнить устаревший вопрос.
В общем, если бы я знал ширину - было бы всё просто. Наверное, баллы всё-таки достанутся кмайку.
Но я решил задачу проще - т. к. никакого дизайнера не было и нету, блок я на самом деле могу размещать как хочу, так что будет левый блок сверху печататься. Выглядит неплохо и никто не догадается, почему именно так.

Ответы:

Невидимка

Ссылку "версия для печати" на другую страничку, где будут по другому располагаться блоки.

kmike

А почему при печати блоки нельзя расположить так, как хочется? Т.е. почему с помощью
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
не удается добиться блоков в нужном порядке при печати?

Ноябрь

Тебе нужно 2 css файла: для отображения и печати.
Для горизонтального расположения нужно выставить float обоим блокам и указать ширину (тоже обоим).
Еще я нашел интересный способ горизонтального расположения: в качстве блоков использовать span и поставить ему display: inline-block; При этом между тегами конца и начала не должно быть пробелов, т.е так:
<span style="display: inline-block;">
текст
</span><span style="display: inline-block;">
если поставишь пробел или перевод строки, то между блоками появится зазор, как если бы это были слова.
</span>
правда отладчик будет ругаться, что внутри span теги, которых не должно быть, но зато корректно отображается в мозилле, опере, ие 6,7, хроме. Думается это идеальный вариант.. дарю)

kmike

хм, видимо, я не понял вопроса сразу
если известна ширина блоков, то можно поиграться с отрицательными margin:
#red{
width:300px;
float:left;
margin-left:220px; /* тут может понадобиться хак для ie - в отдельной css вместо 220 - 110 */
}

Ноябрь

если наоборот, то надо ставит float:right

16 лет назад

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

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

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