html - CSS、HTML 和背景颜色问题。

Question

我有以下问题。

我有 2 组复选框，每组都有一个标题。该标题应该有灰色背景，然后复选框区域的背景应该没有颜色。

问题是，如果我只放置一组带有标题的复选框，背景效果很好。

但是，当我放置第二组复选框时，第一组的复选框区域有灰色背景，似乎继承了第二组标题的背景。

这是代码。有什么线索吗？

谢谢!

<div class="bgFilterTitles">
    <h1 class="filterTitles">COLOR</h1>
</div>
<div class="boxes">
<?php
   $colors = $con -> prepare("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1 ASC");
   $colors ->execute();
   while ($colorBoxes = $colors->fetch(PDO::FETCH_ASSOC))
   {
     echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'>   ".$colorBoxes[color_base1]."</font><br />";
   }
?>
</div>


<div class="bgFilterTitles">
    <h1 class="filterTitles">PRICE</h1>
</div>
<div class="boxes">
<?php
   $prices = $con -> prepare("SELECT DISTINCT price FROM item_descr ORDER BY price ASC");
   $prices ->execute();
   while ($priceSort = $prices->fetch(PDO::FETCH_ASSOC))
   {
      echo "<input type='checkbox' class='regularCheckbox' name='price' value='".$priceSort[price]."' /><font class='similarItemsText'>   ".$priceSort[price]."</font><br />";
   }
?>
</div>

以下是使用的 CSS:

.boxes {
   width: 160px;
   float: left;
   padding: 10px;
   border: 1px solid #C6C6C6;
   clear: both;
}
.filterTitles
{
   background-color: #F1F1F1;
   font-family: Arial,Helvetica,Verdana,Sans-serif;
   font-size: 11px;
   font-weight: normal;
   color: #333;
   text-transform: uppercase;
   padding: 4px;
   border: 1px;
   border-color: #C6C6C6;
   border-top-style: dotted;
}

Answer 1

我不确定我是否理解正确，这是你想要做的吗？

http://jsfiddle.net/mdLVG/

在这种情况下，您需要将 clear:both; 添加到您的 .filterTitles CSS 类中。