Question

我使用了很多样式，我不知道发布它的简单方法，但它基本上是这样的：

我有一个浮动到右边的图像和一些左边的文本。我尝试将“clear：both”添加到分隔主要文本部分的H2标签，但这很奇怪，所以我尝试了一个HR标签（它也使用了clear：both）。在这两种情况下，我最终得到了一个荒谬的间距，这是我没想到的。

页面在这里：

http://www.goodpricescome.com/this_site.php

您可以在第一个图像/文本部分后面看到奇怪的间距。即使在检查员中，我也看不到这里发生了什么。

Answer 1

#content未浮动，其上一个兄弟#sidebar已浮动。在这种情况下，#content中的清算元素会考虑#sidebar。以下是（i）侧边栏比预先清除内容短的预期结果（ii）侧边栏比预先清晰的内容更高：

content content content content sidebar sidebar
content content content content sidebar sidebar
content content content content content content 
content content content content content content 
----- clearing hr  ----

content content content content sidebar sidebar
content content content content sidebar sidebar
                                sidebar sidebar
                                sidebar sidebar
----- clearing hr  ----

使用以下解决方案之一：

最好将float: left添加到#content
将overflow: hidden添加到#content

Answer 2

1）#sidebar已浮动，但#content未浮动，因此您将获得如此多的空间，因此您需要添加#content{ float: left; }

2）在#content中你的图像是浮动的，但是p没有浮动，因此HR的余量没有生效，因此这里最好的方法是在hr float:left加上width: 100%，所以它会覆盖#content

的全宽

<强> CSS

#content{
float: left;
}

hr{
float: left;
width: 100%;
/*clear:both*/
}

使用＆＃34;清晰时间距很大：两者都是＆＃34;？

2 个答案: