2011-01-28 71 views
1

請考慮下面的代碼:HTML設計問題對準

<!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.當我在<img>標記中添加style="float:right; margin: 0 0 15px 15px;"align="right"時,我想添加該問題。

+0

你說的意思是 「在圖像」 你意味着內容重疊,或者您希望文字不足h和內嵌(垂直)與圖像? – Tr1stan 2011-01-28 18:26:03

回答

2

這是因爲你已經在你的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.

+0

謝謝!它的工作,但你沒有解釋是什麼問題。 – Narek 2011-01-28 18:29:27