<分区>
关闭 8 年前。
- 这个问题是由于打字错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这个问题的解决方式不太可能帮助 future 的读者。
- 编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
CSS div 有自己的想法 - 不遵守 Float 和 Width 值
float 不起作用，但我认为这是因为主 div 有自己的想法。主 div 正确显示背景颜色，但它不符合我设置的宽度值。 #main 似乎显示与名为 #page-wrap 的父 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>
.
这是这个 html/css 的图片
注意红色错误地占据了 1100px 而不是 300px
.
编辑
我通过用“hello”文本替换循环代码简化了上面的内容
单击“查看源代码”时生成的 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="http://127.0.0.1/wp-content/themes/trying%20to%20fix%20sidebar%20home%20Balls%20of/style.css" type="text/css" />
</head>
<body class="home blog logged-in admin-bar no-customize-support">
<div id="page-wrap">
<div id="main">
hello
</div>
<div id="sidebar">
<img src="http://127.0.0.1/wp-content/themes/trying%20to%20fix%20sidebar%20home%20Balls%20of/images/apples/apple1.jpeg">
<img src="http://127.0.0.1/wp-content/themes/trying%20to%20fix%20sidebar%20home%20Balls%20of/images/apples/apple2.jpeg">
</div>
</div></body></html>
最佳答案
#contain-loop 在 float:left; 之后需要一个分号
#contain-loop { float: left; width: 300px; background: red; }
如果你只是 float 元素来改变它们的框显示，我建议你使用 display: inline-block; 或 display: block; 而不是 float: left; 以避免将来出现 float 问题。
fiddle :http://jsfiddle.net/9kb82md5/1/
关于CSS div 有自己的想法 - 不遵守 Float 和 Width 值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25690764/