Очень бы хотелось узнать у вас, дорогие мои товарищи, как сделать обтекание текстом 2х картинок?
Суть в том что текст появляется справа от картинок в блоке шириной 800px.
Скажу сразу что решение я нашёл, но мне почему то кажется, что она какое то дурацкое :) и не совсем правильное, вот код
<div class="separator" style="float: left; height: 320px; margin-left: 50px; width: 320px;">
<a href="http://site.ru/image.jpg" imageanchor="1"><img alt="ля ля ля" border="0" height="320" src="http://site.ru/image.jpg" width="320" /></a></div>
<div class="separator" style="float: left; height: 320px; width: 240px;">
<a href="http://site.ru/image2.jpg" imageanchor="1"><img alt="пим пим пим" border="0" height="320" src="http://site.ru/image.jpg" width="240" /></a></div>
<div class="separator" style="clear: both;"> // вот это я думаю дурацкое решение :)
<p>Вот этот текст отображался справа от картинки!</p>
</div>
Как можно сделать более правильнее, или это и есть гуд? :huh:
Спасибо.
Спустя 2 часа, 25 минут, 13 секунд (14.09.2012 - 15:54) fortuna написал(а):
Попробуй .
clear: none | left | right | both | inherit
Спустя 2 минуты, 54 секунды (14.09.2012 - 15:57) fortuna написал(а):
Извини не заметил .
<div class="separator" style="clear: both;">
Спустя 13 минут, 8 секунд (14.09.2012 - 16:10) sebastjan написал(а):
Про какое обтекание ты говоришь?
У тебя нет ни какого обтекания.
У тебя каждая картинка заперта в отдельный блок и текст в отдельном блоке.
Чтоб обтекали надо две картинки поместить в один блок, всё это завернуть в блок и там уже делать обтекание текстом.
У тебя нет ни какого обтекания.
У тебя каждая картинка заперта в отдельный блок и текст в отдельном блоке.
Чтоб обтекали надо две картинки поместить в один блок, всё это завернуть в блок и там уже делать обтекание текстом.
Спустя 1 час, 57 минут, 3 секунды (14.09.2012 - 18:07) SnowWind написал(а):
| Цитата (sebastjan @ 14.09.2012 - 13:10) |
| Про какое обтекание ты говоришь? |
Я говорю о том, что у меня есть 2 картинки прижатых к левому краю, а текст их обтекает справа, так вот мне это не нужно, а надо - что бы начинался ПОСЛЕ картинок.
Напомню, что проблему я решил использовав ещё 1 див запретив его обтекание.
Вопрос в том, что м.б есть какой-нибудь другой гуманный
способ, с применением стилей к дивам в которых картинки, или ещё какой? Спустя 2 часа, 50 минут, 11 секунд (14.09.2012 - 20:57) sebastjan написал(а):
Более гуманный - :D
Ну сам посуди, зачем тебе столько дивов?
Не проще ли использовать более короткую и понятную запись.
Ну сам посуди, зачем тебе столько дивов?
Не проще ли использовать более короткую и понятную запись.
<style>.blok{width: 270px;}</style>
</head>
<body>
<div class="blok">
<a href="#"><img src="av.jpg" alt="aaaa" width="130" height="150" border="0"></a>
<a href="#"><img src="av.jpg" alt="aaaa" width="130" height="150" border="0"></a>
<h2>Pirat</h2>
<p>
Xxxxx xxxxx xxxx xxxx xxxx xxx xxxxx xxx x x
xxx xxxx xxxx xxxx xxxx xxxx xxxxx xxxx xxxxxx
</p>
</div>
Спустя 10 часов, 43 минуты, 49 секунд (15.09.2012 - 07:41) SnowWind написал(а):
При такой записи картинки будут отображаться не так как мне нужно, мне нужно что бы 2 картинки шли друг за другом (они одинаковые по высоте), потому обязателен - float: left, а текст должен начинаться с новой строки под ними.
Много дивов потому как у меня блог, так же как и у тебя на блогспоте, а он сам их пихает при вставке новой картинки, но я не стал переделывать.
Много дивов потому как у меня блог, так же как и у тебя на блогспоте, а он сам их пихает при вставке новой картинки, но я не стал переделывать.
Спустя 7 часов, 13 минут, 29 секунд (15.09.2012 - 14:54) sebastjan написал(а):
SnowWind
| Цитата |
| При такой записи картинки будут отображаться не так как мне нужно, мне нужно что бы 2 картинки шли друг за другом |
Поясни что значит по твоему(друг за другом)?
-Картинки располагаются на одной линии,текст располагается под ними.
В блоге есть вариант самому редактировать хтмл. и не будет ни чего пихать.
Спустя 1 час, 20 минут, 40 секунд (15.09.2012 - 16:15) SnowWind написал(а):
кароче вот как я сделал - блог По ремонту
Вот про декорирование зеркала 2 картинки идут на одной линии, а под ними текст, так вот если сделать как ты описал, то текст под картинками налезет на свободное пространство справа.
Но видимо без clear: both тут не обойтись, я думал может проще есть варианты.
Можно эти картинки впихнуть в див, картинкам флоат лефт дать, а диву запретить обтекание, вот так н-ое логичнее
Вот про декорирование зеркала 2 картинки идут на одной линии, а под ними текст, так вот если сделать как ты описал, то текст под картинками налезет на свободное пространство справа.
Но видимо без clear: both тут не обойтись, я думал может проще есть варианты.
Можно эти картинки впихнуть в див, картинкам флоат лефт дать, а диву запретить обтекание, вот так н-ое логичнее