Фоматирование текста для разных разрешений

Nanto · September 7, 2011

Собственно всё понятно из картинки...

Что-то затупил - никак не могу придумать решение.

Хотелось бы на чистом css.

Vlad · September 7, 2011

Два решения у меня есть. Это первое, не лишено недостатков.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обтекание</title>
	<style>
	.img { float: left; margin: 0 10px 10px 0; }
	.text {
		width: 900px;
		float: left;
	}	
	</style>
  </head>
 <body>
 <img src="images/figure.jpg" alt="" class="img">
 <p class="text">Винни-Пух был всегда не прочь немного подкрепиться, в
   особенности часов в одиннадцать утра, потому что в это время
   завтрак уже давно окончился, а обед еще и не думал начинаться.
   И, конечно, он страшно обрадовался, увидев, что Кролик достает
   чашки и тарелки.</p>
 </body>
</html>

Вот второе, изящнее сделано, но работает не во всех браузерах.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Обтекание</title>
	<style>
	.img { float: left; margin: 0 10px 10px 0; }
	@media screen and (max-width: 1000px) {
		.text {
			clear: left;
		}
  }
	</style>
  </head>
 <body>
 <img src="images/figure.jpg" alt="" class="img">
 <p class="text">Винни-Пух был всегда не прочь немного подкрепиться, в
   особенности часов в одиннадцать утра, потому что в это время
   завтрак уже давно окончился, а обед еще и не думал начинаться.
   И, конечно, он страшно обрадовался, увидев, что Кролик достает
   чашки и тарелки.</p>
 </body>
</html>

Nanto · September 7, 2011

Спасибо!

Работает... А то я тут уж грешным делом пробовал через img{float:left} и длину через "text:first-line{min-width:..}" (и все равно не срабатывало)

Sign In

Фоматирование текста для разных разрешений

Question

Nanto

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Nanto

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information