cssdiv有自己的想法-不遵守Float和Width值

cssdiv有自己的想法-不遵守Float和Width值,css,wordpress,css-float,Css,Wordpress,Css Float,浮动不起作用,但我认为这是因为主要部门有自己的想法。主div正确显示背景色,但不符合我设置的宽度值#main似乎显示与父div相同的宽度,称为#换页 有什么问题吗 我已经精简了代码以找出问题的根源 这是style.CSS中唯一的CSS #page-wrap { overflow:hidden; width: 1100px; background: orange; } /*Problem with #main is that it displays width: 1100px instead 30

浮动不起作用,但我认为这是因为主要部门有自己的想法。主div正确显示背景色,但不符合我设置的宽度值#main似乎显示与父div相同的宽度,称为#换页

有什么问题吗

我已经精简了代码以找出问题的根源

这是style.CSS中唯一的CSS

#page-wrap { overflow:hidden; width: 1100px; background: orange; }
/*Problem with #main is that it displays width: 1100px instead 300px*/
#main { float: left: width: 300px; background: red; } 
#sidebar { float: left; width: 250px; background: green; }

这是index.php中唯一的html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

<body <?php body_class(); ?>>
<div id="page-wrap">

<div id="main">
Hello
</div>

<div id="sidebar">
<img src="<?php bloginfo('template_directory'); ?>/images/apple1.jpeg">
<img src="<?php bloginfo('template_directory'); ?>/images/apple2.jpeg">
</div>

</div></body></html>

#contain loop
float:左后需要分号

#contain-loop { float: left; width: 300px; background: red; } 
如果您只是浮动元素来更改其框显示,我建议您使用
display:inline block或<代码>显示:块而不是
浮动:左以避免将来出现浮动问题


Fiddle:

“Float不起作用,但我认为这是因为循环的容器有自己的想法。”-你真有趣!你的循环编译后的HTML结果是什么?你需要覆盖
思想:它自己的属性规范。我推荐
mind:what-I-say属性值。是否有任何特殊原因使所有剩余内容都浮动?在
#main{float:left:width:300px;background:red;}
中,在
left
之后有一个冒号,而不是分号。这就是你所有问题的根源。您可以修复该问题,然后删除该问题。:-)谢谢德尼索尔。分号解决了这个问题。我没有意识到我用的是冒号。我真不敢相信我犯了这么愚蠢的错误
#contain-loop { float: left; width: 300px; background: red; }