Проблема HTML-дизайна с выравниванием - PullRequest
Новая
       2

Проблема HTML-дизайна с выравниванием

1 голос
/ 28 января 2011

Пожалуйста, обратите внимание на следующий код: 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign In</title>
</head>

<body bgcolor="#DDDDDD">
<img src="images/logo.png" style="float:right; margin: 0 0 15px 15px;"/> 
<div align="center">
<table border="0" width="500" style="border:groove;background:#DCD5F9">
<tr><td width="50%">User Name:</td> <td width="55%"><input type="text" size="35"/></td></tr>
<tr><td width="50%">Password:</td> <td width="55%"><input type="text" size="35"/></td></tr> 
<tr><td width="50%">&nbsp; </td> <td align="left" width="55%"> <input type="submit" value="Login"/></td></tr>
</table>
</div>
</body>
</html>

В браузере я вижу, что <div> не находится под logo.png. Зачем? И как мне сделать так, чтобы он был под logo.png?

P.S. Я хотел бы добавить, что эта проблема возникла при добавлении тега style="float:right; margin: 0 0 15px 15px;" или align="right" в <img>.

1 Ответ

2 голосов
/ 28 января 2011

Это потому, что вы добавили float: прямо на ваш IMG, который изменяет поведение IMG в потоке страницы.Принудительное использование div для очистки содержимого решит вашу проблему.

измените это: 

<div align="center">

на: 

<div align="center" style="clear:right;">

Из Википедии:

" Плавающий элемент извлекается из нормального потока и смещается влево или вправо настолько, насколько это возможно, в доступном пространстве. Другое содержимое затем течет рядом с плавающим элементом."

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...