对齐的 HTML 设计问题答案

【问题标题】：HTML design problem with alignment对齐的 HTML 设计问题
【发布时间】：2011-01-29 02:40:13
【问题描述】：

请考虑以下代码：

<!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 下？

附：我想补充一下，当我在<img> 标签中添加style="float:right; margin: 0 0 15px 15px;" 或align="right" 时出现的问题。

【问题讨论】：

“在图像下”是什么意思你的意思是内容是重叠的，还是你想要文字在下面并与图像内联（垂直）？

标签： html alignment

【解决方案1】：

这是因为您在 img 上添加了 float:right，这会改变 img 在页面流中的行为方式。强制 div 清除内容将解决您的问题。

改变这个：

<div align="center">

到：

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

来自维基百科：

“A floated item is taken out of the normal flow and shifted to the left or right as far as possible in the space available. Other content then flows alongside the floated item.”

【讨论】：

谢谢！它有效，但您没有解释问题所在。
添加了更多细节。希望这能回答您的问题。