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

[pulse 5]

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

Вот код 

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

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

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

[Sanchello 20]

убери float

[pulse 5]

убери float

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

[dee0xeed 36]

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

[amigo 128]

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

[YahooЕЮ 318]

Так проще...

<div style="float:left; padding:5px;">тут ваша картинка</div>тут ваш текст

[amigo 128]

Картинка и текст и без вашего "простого" решения были разделены)

[node.js 103]

<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;

}

 

[pulse 5]

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

[msv 5]

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

<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>

[m1h3y 7]

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

</p> 

 

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

[Fokebox 463]

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

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

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

[pulse 5]

Чего то не получается, ни один из способов (способ про отдельные записи в 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>, то получится вот так => картинка ниже.

[dee0xeed 36]

<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>

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

[pulse 5]

<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>

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

 

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

[dee0xeed 36]

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

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

[dee0xeed 36]

попробуйте

<div style="overflow: hidden; display: block;">

или

<div style="overflow: hidden; width: XXXpx;">

XXX - ширина блока картинки с текстом

[Kweb 31]

Самый простой способ добавить один br со стилем clear:both;

<br style="clear:both;" />

Это отменяет обтекание.

[Pro100Fun 852]

Добавьте тот текст, что написали выше, после кода материала. 

[node.js 103]

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

 

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

[pulse 5]

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

 

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

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

[Kweb 31]

 clear:both что значит банальный костыль?

Это не костыль. clear отменяет обтекание для указанных сторон (left, right) both - для обоих сторон. http://htmlbook.ru/css/clear