CSS, HTML 및 배경색 문제.

Question

다음과 같은 문제가 있습니다.

각 제목에 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; 
} 

Answer 1

내가 문제를 정확하게 이해하면 잘 모르겠어요, 이것은 당신이하려고했던 무엇인가? 이 경우

http://jsfiddle.net/mdLVG/

당신은 당신의 .filterTitles CSS 클래스에 clear:both;를 추가해야합니다.