Перейти к публикации

обтекание одного блока div другим


Рекомендованные сообщения

Добрый день! Нужно Ваша помощь: требуется что бы один div обтекал другой!

вот код:

<div class="full-top-block">

  <div class="full-top-image">

   <img itemprop="image" src="{image-1}" alt="{title}" />

  </div>


  <div class="relative">

			[xfgiven_quality]<b>Качество:&nbsp;</b><div class="custom-label2">[xfvalue_quality]</div>[/xfgiven_quality]<br />

		<div class="fl-left"><b>Рейтинг:</b></div><div class="fl-left">{rating}</div><div class="clear_fix"></div><br/><br/>

		[xfgiven_slogan]<b>Слоган:</b> [xfvalue_slogan]<br/>[/xfgiven_slogan]

  [xfgiven_year]<b>Год выпуска:</b> [xfvalue_year]<br />[/xfgiven_year]

  [xfgiven_zanr]<b>Жанр:</b> [xfvalue_zanr]<br />[/xfgiven_zanr]

  [xfgiven_strana]<b>Страна:</b> [xfvalue_strana]<br />[/xfgiven_strana]

  [xfgiven_dlina]<b>Длина:</b> [xfvalue_dlina]<br />[/xfgiven_dlina]

   <!--noindex-->

		[xfgiven_reziser]<b>Режисер:</b> <span itemprop="director" itemscope itemtype="http://schema.org/Person"><span itemprop="name">[xfvalue_reziser]</span></span><br />[/xfgiven_reziser]


		[xfgiven_akteri]<b>В ролях:</b><span itemprop="actor" itemscope itemtype="http://schema.org/Person"><span itemprop="name"> [xfvalue_akteri]</span></span><br />[/xfgiven_akteri] <!--noindex-->

	<br />

		{full-story}


			</div>


</div>

Сайт

Вот как нужно:

b8dcd64a90db.png

Спасибо за помощь!

Изменено пользователем stas9238
Ссылка на сообщение
Поделиться на других сайтах

stas9238, для .full-top-image в .css добавь float:left; и размести его в пределах <div class="relative"> , где идёт всё описание фильма

Ссылка на сообщение
Поделиться на других сайтах

stas9238, для .full-top-image в .css добавь float:left; и размести его в пределах <div class="relative"> , где идёт всё описание фильма

у меня они сейчас так расположены


<div class="full-top-block">

	<div class="full-top-image"></div>

	<div class="relative"></div>

</div>

{full-story} (описание) находится в relative

Изменено пользователем stas9238
Ссылка на сообщение
Поделиться на других сайтах

stas9238,

<div class="full-top-block">

    <div class="relative">

        <div class="full-top-image"></div>

    </div>

</div>

и для .full-top-image добавить float:left;

Ссылка на сообщение
Поделиться на других сайтах

stas9238,

<div class="full-top-block">

	<div class="relative">

		<div class="full-top-image"></div>

	</div>

</div>
и для .full-top-image добавить float:left;
у меня для него и так стоит float:left; Вот:

<div class="full-top-block">

   <div class="full-top-image">

   <img itemprop="image" src="{image-1}" alt="{title}" />

  </div>


  <div class="relative">

		[xfgiven_name]<b>Название:</b> [xfvalue_name]<br/>[/xfgiven_name]

		[xfgiven_slogan]<b>Слоган:</b> [xfvalue_slogan]<br/>[/xfgiven_slogan]

  [xfgiven_year]<b>Год выпуска:</b> [xfvalue_year]<br />[/xfgiven_year]

  [xfgiven_zanr]<b>Жанр:</b> [xfvalue_zanr]<br />[/xfgiven_zanr]

  [xfgiven_strana]<b>Страна:</b> [xfvalue_strana]<br />[/xfgiven_strana]

  [xfgiven_dlina]<b>Длина:</b> [xfvalue_dlina]<br />[/xfgiven_dlina]

   <!--noindex-->

		[xfgiven_reziser]<b>Режисер:</b> <span itemprop="director" itemscope itemtype="http://schema.org/Person"><span itemprop="name">[xfvalue_reziser]</span></span><br />[/xfgiven_reziser]

  [xfgiven_akteri]<b>В ролях:</b><span itemprop="actor" itemscope itemtype="http://schema.org/Person"><span itemprop="name"> [xfvalue_akteri]</span></span><br />[/xfgiven_akteri] <!--noindex-->

	<br />  

			   &nbsp;&nbsp;&nbsp;&nbsp;{full-story}

			</div>

</div>


.full-top-block{

  position: relative;

  margin: 0 0 20px 20px;

}


  .full-top-image{

   position: relative;

   width: 320px;

   float:left;

   overflow: hidden;

  }


.relative{

  width: 400px;

  height: 450px;

  position: absolute;

  top: 0px;

  right: 10px;

http://kino-maniac.ru/135-spartak-krov-i-pesok-sezon-2.html

Изменено пользователем stas9238
Ссылка на сообщение
Поделиться на других сайтах

stas9238, я не смотрел твой .css, если брать во внимание его, тогда нужно полностью вёрстку этой части переписать. Обтикание div ни чем не отличается от аналогичного обтикание картинки,

принцип довольно простй:

<div style="width:400px;">

<div style="width:200px;height:100px;background:#ddd;float:left;"></div>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a pulvinar metus, sed viverra metus.

Sed sodales euismod arcu, pulvinar ultricies orci interdum lobortis. Ut vel dui ultrices, tincidunt

lorem in, faucibus augue. Duis sed aliquet mi. Aenean a aliquet lacus, quis suscipit erat. Vivamus

a ex ac erat placerat egestas. Mauris scelerisque velit sit amet fringilla maximus. Cum sociis natoque

penatibus et magnis dis parturient montes, nascetur ridiculus mus.

</div>

</div>

сохрани через блокнот как .html и открой этот файл через браузер

Ссылка на сообщение
Поделиться на других сайтах
  • 5 недель спустя...

Вы абсолютно правы. В этом что-то есть и идея отличная, согласен с Вами.

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...