0

次の問題があります。

それぞれにタイトルが付いた2セットのチェックボックスがあります。そのタイトルの背景は灰色であると想定されているため、チェックボックス領域の背景に色を付けないでください。

問題は、タイトル付きのチェックボックスを1セットだけ配置すると、背景が適切に機能することです。

ただし、2番目のチェックボックスセットを配置すると、1番目のセットのチェックボックス領域の背景が灰色になり、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;
}
4

1 に答える 1

1

問題を正しく理解したかどうかはわかりませんが、これはあなたがやろうとしていたことですか？

http://jsfiddle.net/mdLVG/

その場合、CSSクラスに追加する必要がありclear:both;ます.filterTitles。

于 2012-12-16T16:49:46.080 に答える