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等

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

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

文档头中的CSS样式未应用

4 个答案: