Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 19.12.2005 14:37

casey
Новичок
Зарегистрирован: 13.12.2005
Сообщений: 11

Обтекание div'а с картинкой внутри текстом

Как сделать, чтобы сабж работал в мозилле так же, как и в IE?
Вот пример:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div#content {
    width:45%;
}

div.photo {
    float:left;
}
div.right {
    float:left;
}
div.d {
    clear:both;
}
div {border:1px solid black}
</style>
</head>
<body>
<div id="content">
    <p>fdas fad  fads s fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd </p>
    <div class="photo"><img src="photo.gif" width-"200" height="100"/><div class="title">fdasfsd</div></div>
    <div class="right"><p>fdas fad  fads s fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd </p>
    </div>
    <div class="d">---</div>
    <p>fdas fad  fads s fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd  fads fsd </p>
</div>
</body>
</html>

Нет на форуме

 

#2 19.12.2005 16:14

Andrew
Administrator
Зарегистрирован: 21.11.2005
Сообщений: 90
Вебсайт

Re: Обтекание div'а с картинкой внутри текстом

У div.right уберите float.

Нет на форуме

 

#3 19.12.2005 17:11

casey
Новичок
Зарегистрирован: 13.12.2005
Сообщений: 11

Re: Обтекание div'а с картинкой внутри текстом

В таком случае, если текст в правой "колонке" больше по высоте, чем картинка влевой, то картинка обтекается, т.е. на строчках после картинки текст начинается по горизонтали с начала #content, а нужно - чтобы шел в отдельной "колонке" div.right до div.d[ivider]

Нет на форуме

 

#4 20.12.2005 09:57

Andrew
Administrator
Зарегистрирован: 21.11.2005
Сообщений: 90
Вебсайт

Re: Обтекание div'а с картинкой внутри текстом

casey написал:

В таком случае, если текст в правой "колонке" больше по высоте, чем картинка влевой, то картинка обтекается, т.е. на строчках после картинки текст начинается по горизонтали с начала #content, а нужно - чтобы шел в отдельной "колонке" div.right до div.d[ivider]

как Вы и просили в теме.

тогда так:
div.right {
    margin-left:200px; // или чуть больше
}

Нет на форуме

 

#5 25.12.2005 21:10

AKS
Опытный
Зарегистрирован: 25.12.2005
Сообщений: 409

Re: Обтекание div'а с картинкой внутри текстом

Специально для Mozilla & Opera существует свойство display:table-cell. Убрав у правой колонки обтекание справа, но оставив этот параметр для IE, можно добиться одинакового отображения двух колонок в разных браузерах. Для Opera 7 придется добавить в правую колонку vertical-align:top.

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson

любовницы ищут богатых мужчин.