Question

Float无效，但我认为这是因为主要的div有自己的想法。主div正确显示背景颜色，但它不符合我设置的宽度值。 #main似乎显示与父div相同的宽度，称为#page-wrap

可能是什么问题？

我已经删除了代码以找出问题的根源。

这是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

enter image description here

。

修改

我通过用＆＃34; hello＆＃34;替换循环代码来简化上述操作。文本

点击＆＃34;查看来源＆＃34;

时产生的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>

Answer 1

#contain-loop在float:left;

之后需要分号

#contain-loop { float: left; width: 300px; background: red; }

如果您只是浮动元素来更改其框显示，我建议您使用display: inline-block;或display: block;代替float: left;以避免将来出现浮动问题。< / p>

小提琴：http://jsfiddle.net/9kb82md5/1/

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

1 个答案: