<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
</head>
<body>
<div style="text-align: justify;">
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
<img height="200" width="200" src="page.gif" />
</div>
</body>
</html>
Адаптация страницы к размеру окна браузера
Коллеги, ни у кого нет идей, как Google в images.google.ru реализовали перерисовку страницы под размер окна браузера? Если кто не видел - заходите на страницу с результатами поиска картинок, меняете размер окна и на странице, в зависимости от размера, у вас может отображаться либо 2 колонки картинок, либо 5 и т.д.
Очень уж приятная фича. Хочу позаимствовать у них идею. Но вот в плане реализации - совершенно не представляю себе, как это сделать... :-(
Заранее спасибо за советы...
Очень уж приятная фича. Хочу позаимствовать у них идею. Но вот в плане реализации - совершенно не представляю себе, как это сделать... :-(
Заранее спасибо за советы...
Вопрос снят... Совершенно случайно наткнулся на очень элегантный метод сделать такую фичу средствами CSS... :-)
з.ы. Если кому интересно - http://realworldstyle.com/thumb_float.html
з.ы. Если кому интересно - http://realworldstyle.com/thumb_float.html
Если бы ты в свое время внимательно читал CSS спецификацию, то вопрос скорее всего просто бы не возник.
Во-первых, как-то немножко обидно выглядит ваша реплика...
А, собственно, если по теме топика. Оказывается вопрос все еще не снят. Дело в том, что wrap объектов таким методом совершенно не похож на то, что хочется получить в результате. Дело в том, что при переносе - оставшиеся на строчке слои не центрируются (так как у них стоит float="left"). Соответственно, если слои достаточно широкие - справа остается достаточно много пустого места, которое выглядит совершенно убого.
У меня появилась мысль, что это можно сделать с помощью java script: по ресайзу окна браузера - высчитывать расстояния между слоями в одной строчке и, соответственно, назначать им какие-то margin'ы, чтобы они стояли по центру.
Я понимаю, что если бы я внимательно читал книжки по JavaScript я бы знал ответ на этот вопрос. Но так как я этого не делал, может кого-нибудь из гуру не особо напряжет вопрос: такое вообще возможно сделать или нет. Если возможно - тогда начну читать. Если нет - надо тогда думать дальше (очень уж не хочется перегружать страницу AJAX'ом, как это сделано на Гугло.Картинках)...
А, собственно, если по теме топика. Оказывается вопрос все еще не снят. Дело в том, что wrap объектов таким методом совершенно не похож на то, что хочется получить в результате. Дело в том, что при переносе - оставшиеся на строчке слои не центрируются (так как у них стоит float="left"). Соответственно, если слои достаточно широкие - справа остается достаточно много пустого места, которое выглядит совершенно убого.
У меня появилась мысль, что это можно сделать с помощью java script: по ресайзу окна браузера - высчитывать расстояния между слоями в одной строчке и, соответственно, назначать им какие-то margin'ы, чтобы они стояли по центру.
Я понимаю, что если бы я внимательно читал книжки по JavaScript я бы знал ответ на этот вопрос. Но так как я этого не делал, может кого-нибудь из гуру не особо напряжет вопрос: такое вообще возможно сделать или нет. Если возможно - тогда начну читать. Если нет - надо тогда думать дальше (очень уж не хочется перегружать страницу AJAX'ом, как это сделано на Гугло.Картинках)...
Цитата: sTorkVist
Во-первых, как-то немножко обидно выглядит ваша реплика...
Констатация факта не может быть обидной. Обижать стоит разве только на себя.
Термин "слой" ты употребляешь не правильно.
Один из варинатов решения:
Код:
Другой ты уже сам высказал.
Цитата: alekciy
Термин "слой" ты употребляешь не правильно.
Пардон, я не уточнил. Мне нужно так расставлять не просто изображения (толку от этого мало), а слои (<div></div>). С ними, насколько я понимаю, трюк с justify не срабатывает...
Цитата: sTorkVist
Пардон, я не уточнил. Мне нужно так расставлять не просто изображения (толку от этого мало), а слои (<div></div>). С ними, насколько я понимаю, трюк с justify не срабатывает...
1) Div-ы это НЕ СЛОИ!!! Стоит это зарубить себе на носу.
2) Срабатывает. Если div сделать блоком уровня строки.