未应用文档头中的CSS样式

Question

如果问题太简单，我深表歉意。 我确定是的，但是我已将此代码通过W3C.org上的验证器放置，并仔细查看了本网站上相关链接和字符串的内容，但是我发现没有任何东西给我任何答案，至少是这样我可以理解。

我的头中有一个非常简陋的html文档，带有一些CSS样式。 我要做的就是使用简单的CSS样式将副本包装在图像上。

我正在学习如何执行此操作，并且正在按照书中的示例进行操作，但是代码无法正常运行。

这是我的代码。 我究竟做错了什么？ （我使用的是在优胜美地上运行的Chrome和Safari。_____________________代码开头_____________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<head> 
<title>Float</title> 
<meta http-equiv="content-type"  content="text/html lang="en-US">

<style type="text/css"> 

.featureimage {   
float: left;   
width: 300px; 
}
p.copy {    
float: right;   
align: center; 
} 
</style>

</head>

<body> 
<h1>This Is A Very Large Housing D,evelopment.</h1>

<img src="BLDGS-300x200.jpg" width="300" height="200" alt="hi-rise" class="featureimage">


<p class="copy"> At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,  repellat… </p>

</body>

</html>

_________________ end of code ______________________

Answer 1

因为您在段落上直接指定了float: right所以规则如何与之前的浮动内容进行交互。 这使它下降到新的一行。

删除float:right ，文本将环绕图像。

align:center是无效的CSS。 没有align这样的属性。

Answer 2

在大多数浏览器中， <p> （和其他块）元素的默认宽度为100％。 因此，文本不会“适合”图像的旁边并被推送到下一行。 尝试给段落加上一个宽度。

Answer 3

这是更新代码

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

        <style type="text/css"> 

        .featureimage {   
        float: left;   
        width: 300px; 
        }
        p.copy {    
        float: right;   
        align: center; 
        } 
        </style>

        </head>

        <body> 
        <h1>This Is A Very Large Housing D,evelopment.</h1>

        <img src="BLDGS-300x200.jpg" width="300" height="200" alt="hi-rise" class="featureimage" />


        <p class="copy"> At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,  repellat… </p>

        </body>

        </html>

希望一切顺利！

Answer 4

我要通过@ https://validator.w3.org/check （带有两个警告）的操作很简单：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<title>Float</title> 


<style type="text/css"> 
.featureimage {   
float: left;   
margin: 0 10px 10px 0;
}
</style>

</head>

<body> 

<h1>This Is A Very Large Housing D,evelopment.</h1>

<p><img src="building.jpg" width="300" height="200" alt="hi-rise" class="featureimage">
At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,  repellat… At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,  repellat… </p>

</body>

</html>

警告与以下内容有关：

在文档级别未声明字符编码

在HTML元元素或XML声明中，没有在文档中找到任何字符编码信息。 通常建议在文档本身中声明字符编码，尤其是在有可能从磁盘，CD等读取文档或将文档保存到磁盘，CD等的情况下。

有关字符编码的技术和说明，请参见本教程（ http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0250 ）。

JSFiddle： https ：//jsfiddle.net/m3ea8nj8/

未应用文档头中的CSS样式

问题描述

4 个解决方案

解决方案1
3 2017-01-07 23:43:51

解决方案2
0 2017-01-07 23:43:42

解决方案3
-1 2017-01-07 23:31:56

解决方案4
-1 2017-01-08 00:16:02

未应用文档头中的CSS样式

问题描述

4 个解决方案

解决方案1 3 2017-01-07 23:43:51

解决方案2 0 2017-01-07 23:43:42

解决方案3 -1 2017-01-07 23:31:56

解决方案4 -1 2017-01-08 00:16:02

解决方案1
3 2017-01-07 23:43:51

解决方案2
0 2017-01-07 23:43:42

解决方案3
-1 2017-01-07 23:31:56

解决方案4
-1 2017-01-08 00:16:02