CSS、HTML 和背景颜色的问题。答案

【问题标题】：Issue with CSS, HTML and background colors.CSS、HTML 和背景颜色的问题。
【发布时间】：2012-12-16 16:38:04
【问题描述】：

我有以下问题。

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

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

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

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

谢谢！

<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;
}

【问题讨论】：

有没有机会用 jsfiddle.net 重现这个问题？

标签： html css colors background

【解决方案1】：

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

http://jsfiddle.net/mdLVG/

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

【讨论】：