Question

这对我来说有点特殊。目前还不确定为什么会发生这种情况。我有一个特殊的div标签，其中class =“sidehead”这个类附有一些样式，如下所示

<style>
.sidehead {
background: none  scroll 0 0 #105289;
//border-radius: 15px 15px 15px 15px;
color: #FFFFFF;
font-weight: 700;
padding: 3px 15px;
margin: 5px;
text-shadow: 0 0 2px #000000;
}
</style>

现在这个div的目的是设置侧边栏中每个项目的标题。然而，当我将2添加回div时，蓝色也会涂抹在前一个div上。我不确定为什么会这样。

您可以检查http://mashup2.sunnydsouza.com上的有缺陷的效果。只需检查侧边栏，您就会意识到我在说什么。我正在谈论的两个项目是使用php中的include（）语句获取的。它们是两次调用的相同脚本。

 echo '<div class="sidehead">Most Popular articles</div>';

    include('widget_2.php'); 

    echo '<br>';

    echo '<div class="sidehead">Random articles</div>';

    include('widget_2.php');

有人可以帮我解决这个问题。 Dunno为什么蓝色在第一个div上传播:(

Answer 1

问题似乎与标题下的floated项有关。

尝试制作一个清除的br，例如。 <br style="clear:both">。

echo '<div class="sidehead">Most Popular articles</div>';

    include('widget_2.php'); 

    echo '<br style="clear:both">'; //CHANGE HERE

    echo '<div class="sidehead">Random articles</div>';

    include('widget_2.php');

当我在使用Chrome的inspect element控制台中更改它时，这对我有用。

enter image description here

Answer 2

include语句引入的每个元素都具有“float: left”样式。删除它们（在“大多数活动”和“最近”之下）可以解决问题。

Answer 3

我快速检查了一下，虽然我没有指出确切的错误，但我注意到你可以做很多事情来提高代码质量并简化调试错误。

首先，我认为<center>已被弃用。使用<p align="center">或使用CSS代替。

其次，<br>是错误的，应该是<br></br>，或者<br />，尽管大多数浏览器都可能会忽略它，但它不符合W3C标准，它对创造一个好习惯很重要。

第三，你的CSS无处不在，这很糟糕。你看，有三种方法可以做CSS，（1）内联 <div style="some css here" > （2）外部文件 <head> <link ...."yourCss.css" > </head> （3）文件范围 <head> <style>some css here </style></head>

避免在不同位置使用所有三种混合方法。通常，最好的方法是使用class和id来标识要设置样式的所有元素，然后在外部CSS中定义其css属性。

问题似乎是CSS范围，上面的方法各自具有不同的“范围优先级”，因此将它们混合起来确实使得应用于元素的样式的优先级变得复杂。希望这会有所帮助。

Answer 4

//border-radius: 15px 15px 15px 15px;

以上css样式忽略

使用以下

/*border-radius: 15px 15px 15px 15px;*/

不确定但只有css问题，其工作

Answer 5

从最受欢迎的文章容器中删除float:left;在Firefox中为我工作。

CSS样式中出现问题的同一个div标签被调用两次。行为不同

5 个答案: