Jump to content
Sign in to follow this  
pulse

Нужна помощь в HTML

Recommended Posts

Привет, мне нужна помощь, в гугле ничего не нашёл. 

Вот код 

<img src="images/1/Sodoma.jpg" alt="Сало" width="160" height="240" style="margin-top: 3px; margin-right: 3px; float: left;" />текст, текст, текст, текст, текст, ещё текст, ещё текст, ещё текст.

Вот "текст" обтикает картинку, как мне сделать чтобы "ещё текст" начинался с новой строки и уже под картинкой?

Я пробовал ставить много <br>, но этот вариант не подходит.

Share this post


Link to post
Share on other sites

убери float

если я уберу float, то "текст" не будет обтикать картинку, а мне нужно что бы часть текста обтикала картинку, а вторая часть уже была под картинкой.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Вторую часть текста возьмите в span и задайте стили которые пожелаете. Float left, и <p> перед спаном.

Share this post


Link to post
Share on other sites


<div class="span">

<div class="span-0">

<img src="">

</div>

<div class="span-0">

text text text

</div>

</div>

другой тект


.span {

display: block;

overflow:hidden;

}

.span-0 {

float: left;

}

 

Share this post


Link to post
Share on other sites

Спасибо за помощь, вечером попробую один из предложенных способов. Надеюсь получиться.

Share this post


Link to post
Share on other sites

Еще можно так сделать

<img src="images/1/Sodoma.jpg" alt="Сало" width="160" height="240" style="margin-top: 3px; margin-right: 3px; float: left;" />
<p style="display:block;">текст, текст, текст, текст, текст, ещё текст, ещё текст, ещё текст.</p>

Share this post


Link to post
Share on other sites
<p style="margin-right: 10px; margin-bottom: 5px; float: left; width: 160px;"><img src="images/111.jpg" alt="Сало " width="160" height="240" />текст текст текст текст текст текст текст текст текст

</p> 

 

На и будет тебе щастя! =)

Share this post


Link to post
Share on other sites

Я бы так сделал:

<div="imagebox">
<div="image"><img src="images/1/Sodoma.jpg" alt="Сало"</div>
</div>

А все настройки прописывал в соответствующем css файле

Share this post


Link to post
Share on other sites

Чего то не получается, ни один из способов (способ про отдельные записи в css не рассматривал) не подходит, возможно это моя ошибка, сейчас опишу проблему подробнее. Движок джумл. У меня сейчас вот так

<h2><span style="font-size: 12pt;"><a href="uzhasy/13-drugoe/132-gruz-200-2007.html" target="_blank">3. Груз 200 (2007).</a><br /></span></h2>
<p><span style="font-size: 12pt;"><img src="images/1/200.jpg" alt="Груз 200" width="160" height="240" style="margin-top: 3px; margin-right: 3px; float: left;" />ТЕКСТ О ФИЛЬМЕ</span></p>
<p class="btn"><a href="uzhasy/13-drugoe/132-gruz-200-2007.html" target="_blank">Смотреть онлайн: Груз 200</a></p>
<p> </p>
<p> </p>
<p> </p>
<h2><span style="font-size: 12pt;"><a href="uzhasy/13-drugoe/136-zelenyj-slonik-1999.html" target="_blank">4. Зелёный слоник (1999).</a><br /></span></h2>
<p><span style="font-size: 12pt;"><img src="images/1/green.jpg" alt="Зелёный слоник" width="160" height="240" style="margin-top: 3px; margin-right: 3px; float: left;" />ТЕКСТ О ВТОРОМ ФИЛЬМЕ.<br /></span></p>
Сейчас они у меня разделяются с помощью переноса строки <p> </p>, как сделать что бы без этих переносов, новый блок с фильмом был с новой строки и уже под картинкой. На данный момент, если я уберу <p> </p>, то получится вот так => картинка ниже.

post-12218-0-84802200-1448904971_thumb.jpg

Share this post


Link to post
Share on other sites
<div style="overflow: hidden;">
    <h2><span style="font-size: 12pt;"><a href="uzhasy/13-drugoe/132-gruz-200-2007.html" target="_blank">3. Груз 200 (2007).</a><br /></span></h2>
    <p><span style="font-size: 12pt;"><img src="images/1/200.jpg" alt="Груз 200" width="160" height="240" style="margin-top: 3px; margin-right: 3px; float: left;" />ТЕКСТ О ФИЛЬМЕ</span></p>
    <p class="btn"><a href="uzhasy/13-drugoe/132-gruz-200-2007.html" target="_blank">Смотреть онлайн: Груз 200</a></p>
</div>
<div style="overflow: hidden;">
    <h2><span style="font-size: 12pt;"><a href="uzhasy/13-drugoe/136-zelenyj-slonik-1999.html" target="_blank">4. Зелёный слоник (1999).</a><br /></span></h2>
    <p><span style="font-size: 12pt;"><img src="images/1/green.jpg" alt="Зелёный слоник" width="160" height="240" style="margin-top: 3px; margin-right: 3px; float: left;" />ТЕКСТ О ВТОРОМ ФИЛЬМЕ.<br /></span></p>
</div>

если правильно понял

Share this post


Link to post
Share on other sites
<DIV стиль = "переполнение: скрытый;">
    <h2> <SPAN стиль = "Размер шрифта: 12pt;"> <a href="uzhasy/13-drugoe/132-gruz-200-2007.html" target="_blank"> 3. Груз 200 (2007). </a> <br /> </ SPAN> </ h2>
    <р> <SPAN стиль = "Размер шрифта: 12pt;"> <IMG SRC = "Images / 1 / 200.jpg" Alt = "Груз 200" ширина = "160" высота = "240" стиль = "недостаточной мере верх: 3px; маржа-направо: 3px; поплавок: слева; " /> ТЕКСТ О ФИЛЬМЕ </ SPAN> </ P>
    <р класса = "БТН"> <a href="uzhasy/13-drugoe/132-gruz-200-2007.html" target="_blank"> смотреть онлайн: Груз 200 </a> </ P>
</ DIV>
<DIV стиль = "переполнение: скрытый;">
    <h2> <SPAN стиль = "Размер шрифта: 12pt;"> <a href="uzhasy/13-drugoe/136-zelenyj-slonik-1999.html" target="_blank"> 4. Зелёный слоник (1999). </a> <br /> </ SPAN> </ h2>
    <р> <SPAN стиль = "Размер шрифта: 12pt;"> <IMG SRC = "Images / 1 / green.jpg" Alt = ширина = "160" высота = "240" стиль "Зелёный слоник" = "в недостаточной мере верх: 3px; маржа-направо: 3px; поплавок: слева; " /> ТЕКСТ О ВТОРОМ ФИЛЬМЕ. <br /> </ SPAN> </ P>
</ DIV>

если правильно понял

 

Ваш вариант не подходит, нужно чтобы получилось вот так

post-12218-0-27350500-1448906674_thumb.jpg

Share this post


Link to post
Share on other sites

Ваш вариант не подходит, нужно чтобы получилось вот так

у меня документ без стилей так и отображается. что там у вас за маржа направо и поплавок слева?)

fff8d15fbe6d6333d6ca06881fcc978f.png

Share this post


Link to post
Share on other sites

Если у вас мой код не работает, значит у вас в стилях что то намудрено, вот пример https://jsfiddle.net/fq9kuzhy/

 

Зачистку строки в виде clear:both, лучше не делать, так как это банальный костыль, лучше найти в стилях ошибки чем каждый раз зачищать строку!

Share this post


Link to post
Share on other sites

Если у вас мой код не работает, значит у вас в стилях что то намудрено, вот пример https://jsfiddle.net/fq9kuzhy/

 

Зачистку строки в виде clear:both, лучше не делать, так как это банальный костыль, лучше найти в стилях ошибки чем каждый раз зачищать строку!

Я ваш способ не пробовал, у вас нужно в ксс стили прописывать. clear:both что значит банальный костыль?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...