pulse 5 Posted November 29, 2015 Report Share Posted November 29, 2015 Привет, мне нужна помощь, в гугле ничего не нашёл. Вот код <img src="images/1/Sodoma.jpg" alt="Сало" width="160" height="240" style="margin-top: 3px; margin-right: 3px; float: left;" />текст, текст, текст, текст, текст, ещё текст, ещё текст, ещё текст. Вот "текст" обтикает картинку, как мне сделать чтобы "ещё текст" начинался с новой строки и уже под картинкой? Я пробовал ставить много <br>, но этот вариант не подходит. Quote Link to post Share on other sites
Sanchello 20 Posted November 29, 2015 Report Share Posted November 29, 2015 убери float Quote Link to post Share on other sites
pulse 5 Posted November 29, 2015 Author Report Share Posted November 29, 2015 убери float если я уберу float, то "текст" не будет обтикать картинку, а мне нужно что бы часть текста обтикала картинку, а вторая часть уже была под картинкой. Quote Link to post Share on other sites
dee0xeed 36 Posted November 29, 2015 Report Share Posted November 29, 2015 можно разграничить области div-ами со своими стилями, и текст который под картинкой писать уже в другом блоке Quote Link to post Share on other sites
amigo 128 Posted November 29, 2015 Report Share Posted November 29, 2015 Вторую часть текста возьмите в span и задайте стили которые пожелаете. Float left, и <p> перед спаном. Quote Link to post Share on other sites
YahooЕЮ 322 Posted November 29, 2015 Report Share Posted November 29, 2015 Так проще... <div style="float:left; padding:5px;">тут ваша картинка</div>тут ваш текст BITbOK and by_limon 2 Quote Link to post Share on other sites
amigo 128 Posted November 29, 2015 Report Share Posted November 29, 2015 Картинка и текст и без вашего "простого" решения были разделены) Quote Link to post Share on other sites
node.js 103 Posted November 30, 2015 Report Share Posted November 30, 2015 <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; } Quote Link to post Share on other sites
pulse 5 Posted November 30, 2015 Author Report Share Posted November 30, 2015 Спасибо за помощь, вечером попробую один из предложенных способов. Надеюсь получиться. Quote Link to post Share on other sites
msv 5 Posted November 30, 2015 Report Share Posted November 30, 2015 Еще можно так сделать <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> Quote Link to post Share on other sites
m1h3y 7 Posted November 30, 2015 Report Share Posted November 30, 2015 <p style="margin-right: 10px; margin-bottom: 5px; float: left; width: 160px;"><img src="images/111.jpg" alt="Сало " width="160" height="240" />текст текст текст текст текст текст текст текст текст </p> На и будет тебе щастя! =) Quote Link to post Share on other sites
Fokebox 463 Posted November 30, 2015 Report Share Posted November 30, 2015 Я бы так сделал: <div="imagebox"> <div="image"><img src="images/1/Sodoma.jpg" alt="Сало"</div> </div> А все настройки прописывал в соответствующем css файле Quote Link to post Share on other sites
pulse 5 Posted November 30, 2015 Author Report Share Posted November 30, 2015 Чего то не получается, ни один из способов (способ про отдельные записи в 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>, то получится вот так => картинка ниже. Quote Link to post Share on other sites
dee0xeed 36 Posted November 30, 2015 Report Share Posted November 30, 2015 <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> если правильно понял Quote Link to post Share on other sites
pulse 5 Posted November 30, 2015 Author Report Share Posted November 30, 2015 <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> если правильно понял Ваш вариант не подходит, нужно чтобы получилось вот так Quote Link to post Share on other sites
dee0xeed 36 Posted November 30, 2015 Report Share Posted November 30, 2015 Ваш вариант не подходит, нужно чтобы получилось вот так у меня документ без стилей так и отображается. что там у вас за маржа направо и поплавок слева?) Quote Link to post Share on other sites
dee0xeed 36 Posted November 30, 2015 Report Share Posted November 30, 2015 попробуйте <div style="overflow: hidden; display: block;"> или <div style="overflow: hidden; width: XXXpx;"> XXX - ширина блока картинки с текстом Quote Link to post Share on other sites
Kweb 31 Posted November 30, 2015 Report Share Posted November 30, 2015 Самый простой способ добавить один br со стилем clear:both; <br style="clear:both;" /> Это отменяет обтекание. Pro100Fun 1 Quote Link to post Share on other sites
Pro100Fun 852 Posted November 30, 2015 Report Share Posted November 30, 2015 Добавьте тот текст, что написали выше, после кода материала. Quote Link to post Share on other sites
node.js 103 Posted November 30, 2015 Report Share Posted November 30, 2015 Если у вас мой код не работает, значит у вас в стилях что то намудрено, вот пример https://jsfiddle.net/fq9kuzhy/ Зачистку строки в виде clear:both, лучше не делать, так как это банальный костыль, лучше найти в стилях ошибки чем каждый раз зачищать строку! Quote Link to post Share on other sites
pulse 5 Posted December 1, 2015 Author Report Share Posted December 1, 2015 Если у вас мой код не работает, значит у вас в стилях что то намудрено, вот пример https://jsfiddle.net/fq9kuzhy/ Зачистку строки в виде clear:both, лучше не делать, так как это банальный костыль, лучше найти в стилях ошибки чем каждый раз зачищать строку! Я ваш способ не пробовал, у вас нужно в ксс стили прописывать. clear:both что значит банальный костыль? Quote Link to post Share on other sites
Kweb 31 Posted December 1, 2015 Report Share Posted December 1, 2015 clear:both что значит банальный костыль? Это не костыль. clear отменяет обтекание для указанных сторон (left, right) both - для обоих сторон. http://htmlbook.ru/css/clear Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.