Надо чтобы текст не обтекал картинку!
Есть у меня задача такая: на сайте на главной странице располагаются анонсы новостей - картинка + краткое содержание новости. Как их расположить вот таким образом? Т.е., чтобы текст был справа от картинки, но ее не обтекал. При этом не использовать таблицы, а дивы и css? Если можно, конкретный пример, т.к. я от обтекания никак не могу избавиться.
Вариантов, мне кажется много. Можно сделать так, но боюсь спецы меня сейчас пинать начнут ногами )
Цитата:
<div class="Pic" style="width:100px; height:100px; float:left; border:1px solid;">pic</div>
<div class="Text" style="width:400px; float:left; border:1px solid;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div class="Text" style="width:400px; float:left; border:1px solid;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
Вот так будет вернее, но возникнут сложности с бордюрами - разные браузеры по-разному их высчитывают.
<div class="Outer" style="width:506px; border:3px solid red;">
<div class="Pic" style="width:100px; height:100px; float:left; border:3px solid blue;">pic</div>
<div class="Text" style="width:400px; float:right; border:3px solid green;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
Цитата:
<div class="Outer" style="width:506px; border:3px solid red;">
<div class="Pic" style="width:100px; height:100px; float:left; border:3px solid blue;">pic</div>
<div class="Text" style="width:400px; float:right; border:3px solid green;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
</div>
Впрочем, если бордюров нет, то и нет проблемы.
На самом деле работает первый из предложенных вариантов. Спасибо
Можно и без лишних дивов, но тогда я не знаю, куда деть align="left" (ИЕ), потому что ни разу не пользовался такими конструкциями.
Цитата:
<div class="Outer" style="width:506px; border:3px solid red;">
<img class="Pic" align="left" style="width:100px; height:100px; border:3px solid blue;" alt="Pic" />
<p class="Text" style="width:400px; border:3px solid green;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
<img class="Pic" align="left" style="width:100px; height:100px; border:3px solid blue;" alt="Pic" />
<p class="Text" style="width:400px; border:3px solid green;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
[QUOTE=ibrnax]На самом деле работает первый из предложенных вариантов. Спасибо[/QUOTE]
Они все работают - вопрос в правильности их исполнения ) Я не уверен, что такой код будет валидироваться и вообще является корректным.
Они все работают - вопрос в правильности их исполнения ) Я не уверен, что такой код будет валидироваться и вообще является корректным.
[QUOTE=Комаджу]Они все работают - вопрос в правильности их исполнения ) Я не уверен, что такой код будет валидироваться и вообще является корректным.[/QUOTE]
Второй вариант правильно отображает только IE в quirksmode.
В Опере и ФФ блок outer не растягивается по высоте. Это можно решить, добавив блок с clear: both;
Второй вариант правильно отображает только IE в quirksmode.
В Опере и ФФ блок outer не растягивается по высоте. Это можно решить, добавив блок с clear: both;
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
</head>
<body>
<div class="Outer" style="width:512px; border:3px solid red;">
<div class="Pic" style="width:100px; height:100px; float:left; border:3px solid blue;">pic</div>
<div class="Text" style="width:400px; float:right; border:3px solid green;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div style="clear: both;"></div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
</head>
<body>
<div class="Outer" style="width:512px; border:3px solid red;">
<div class="Pic" style="width:100px; height:100px; float:left; border:3px solid blue;">pic</div>
<div class="Text" style="width:400px; float:right; border:3px solid green;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div style="clear: both;"></div>
</div>
</body>
</html>
А как быть с третьим вариантом? Есть какой-то правильный вариант?
float: left; для img и p и всего делов.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
</head>
<body>
<div class="Outer" style="width:512px; border:3px solid red;">
<img class="Pic" style="float: left; width:100px; height:100px; border:3px solid blue;" alt="Pic" />
<p class="Text" style="float: left; margin: 0; width:400px; border:3px solid green;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<div style="clear: both;"></div>
</div>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
</head>
<body>
<div class="Outer" style="width:512px; border:3px solid red;">
<img class="Pic" style="float: left; width:100px; height:100px; border:3px solid blue;" alt="Pic" />
<p class="Text" style="float: left; margin: 0; width:400px; border:3px solid green;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<div style="clear: both;"></div>
</div>