stas9238 0 Опубликовано: 18 января 2015 Рассказать Опубликовано: 18 января 2015 (изменено) Добрый день! Нужно Ваша помощь: требуется что бы один 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>Качество: </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> Сайт Вот как нужно: Спасибо за помощь! Изменено 18 января 2015 пользователем stas9238 Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 20 января 2015 Рассказать Опубликовано: 20 января 2015 stas9238, для .full-top-image в .css добавь float:left; и размести его в пределах <div class="relative"> , где идёт всё описание фильма Цитата Ссылка на сообщение Поделиться на других сайтах
stas9238 0 Опубликовано: 20 января 2015 Рассказать Опубликовано: 20 января 2015 (изменено) Автор 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 Изменено 20 января 2015 пользователем stas9238 Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 20 января 2015 Рассказать Опубликовано: 20 января 2015 stas9238, <div class="full-top-block"> <div class="relative"> <div class="full-top-image"></div> </div> </div> и для .full-top-image добавить float:left; Цитата Ссылка на сообщение Поделиться на других сайтах
stas9238 0 Опубликовано: 20 января 2015 Рассказать Опубликовано: 20 января 2015 (изменено) Автор 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 /> {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 Изменено 20 января 2015 пользователем stas9238 Цитата Ссылка на сообщение Поделиться на других сайтах
odys 384 Опубликовано: 20 января 2015 Рассказать Опубликовано: 20 января 2015 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 и открой этот файл через браузер Цитата Ссылка на сообщение Поделиться на других сайтах
Lina_Varfolomeeva 0 Опубликовано: 20 февраля 2015 Рассказать Опубликовано: 20 февраля 2015 Вы абсолютно правы. В этом что-то есть и идея отличная, согласен с Вами. Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.