未应用文档头中的CSS样式
[英]css styles in document head are not being applied
问题描述
My apologies if the question is too simple. 
如果问题太简单，我深表歉意。 I'm sure that it is, but I have put this code through the validator on W3C.org and looked through may of the related links and strings on this site, but I've found nothing that's given me any answers, at least that I can make sense of. 我确定是的，但是我已将此代码通过W3C.org上的验证器放置，并仔细查看了本网站上相关链接和字符串的内容，但是我发现没有任何东西给我任何答案，至少是这样我可以理解。
I have a very rudimentary html document with some css styles in the head. 我的头中有一个非常简陋的html文档，带有一些CSS样式。 All I want to do is have the copy wrap around the image using a simple css style. 我要做的就是使用简单的CSS样式将副本包装在图像上。
I'm just learning how do do this and am following an example from a book, but the code is not working as it's supposed to. 我正在学习如何执行此操作，并且正在按照书中的示例进行操作，但是代码无法正常运行。
Here is my code. 这是我的代码。 What am I doing wrong? 我究竟做错了什么？ (I'm using Chrome and Safari running on Yosemite. _____________________ beginning of code_____________________ （我使用的是在优胜美地上运行的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 ______________________
4 个解决方案
解决方案1
3 2017-01-07 23:43:51
Because you specified float: right on the paragraph, the rules for how it interacts with prior floating content change. 因为您在段落上直接指定了float: right所以规则如何与之前的浮动内容进行交互。 This bumps it down to a new line. 这使它下降到新的一行。
Remove float:right and the text will wrap around the image. 删除float:right ，文本将环绕图像。
align:center is invalid CSS. align:center是无效的CSS。 There is no such property as align . 没有align这样的属性。
解决方案2
0 2017-01-07 23:43:42
The default width for a <p> (and other block) element(s) in most browsers is 100%. 在大多数浏览器中， <p> （和其他块）元素的默认宽度为100％。 Because of that, the text doesn't 'fit' next to the image and get pushed to the next row. 因此，文本不会“适合”图像的旁边并被推送到下一行。 Try giving the paragraph a width as well. 尝试给段落加上一个宽度。
解决方案3
-1 2017-01-07 23:31:56
here is update code 这是更新代码
<!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>
hope will be work fine ! 希望一切顺利！
解决方案4
-1 2017-01-08 00:16:02
What I would do to pass @ https://validator.w3.org/check (with two warnings) is simply use: 我要通过@ 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>
The warnings are related to: 警告与以下内容有关：
No Character encoding declared at document level
No character encoding information was found within the document, either in an HTML meta element or an XML declaration.
See this tutorial ( http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0250 ) on character encoding for techniques and explanations.
JSFiddle: https://jsfiddle.net/m3ea8nj8/ JSFiddle： https ：//jsfiddle.net/m3ea8nj8/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.