0

私のサイトにはフォームがあり、その中に 3 つの州を含む場所セクション、すべての場所を選択するチェックボックス、選択時にその下のすべての町/都市をチェックする郡名、および町/都市チェックボックスがあります。より良いアイデアを提供するためのPHPは次のとおりです。

$str = '<input id="chkMaster" onclick="checkAllEnquiryLocation();" type="checkbox" value="AR000" name="location[]" /> <strong>All Locations</strong>'."\n"."<br>";
    $sql = "SELECT location_area_code, location_area_name FROM emg_location_area";
    $rs = $db->query($sql);
    if ($db->get_num_rows($rs))
    {
        while ($row = $db->fetch_row($rs))
        {
            $str .= '<div id="loco-column">';
            $area_Code = $row['location_area_code'];
            $area_Name = $row['location_area_name'];
            $str .= '<input onclick="checkAll_'.$area_Code.'()'.';" id="'.$area_Code.'" type="checkbox" value="'.$area_Code.'" name="location[]" /> <strong>'.$area_Name.'</strong>'."\n"."<br>";
            $xtpl->assign("function_id", $area_Code);

            $sql = "SELECT location_code, location_name 
                    FROM emg_location 
                    WHERE location_area_code='".$row['location_area_code']."'";
            $rs1 = $db->query($sql);
            if ($db->get_num_rows($rs1))
            {
                while ($row1 = $db->fetch_row($rs1))
                {
                    $k = $row1['location_code'];
                    $v = $row1['location_name'];
                    $str .= '<input id="'.$area_Code.'_'.$k.'" type="checkbox" value="'.$k.'" name="location[]" /> '.$v."\n"."<br/>";
                    $xtpl->assign("element_id", $area_Code."_".$k);
                    $xtpl->parse("main.area_check_all.element");
                }
                $xtpl->parse("main.area_check_all");
$str .= '</div>';
            }
        }

これらを次のように表示したい: Ebay のグリッド リスト ビューページを下にスクロールすると、一部のリストはサイズが異なっていても、インラインに収まり、選択した領域を完全に埋めていることがわかります。

これは非常に簡単だと思いましたが、これを行う方法を確認できる唯一の方法は、より多くのphpを使用することですが、誰もが知っているCSSでこれを行うためのよりクリーンな方法はありますか?

css を使用した私の試みは次のとおりです。ほとんど機能しますが、場所の小さなリストがコンテナの右側で動かなくなっているようです。

#loco-column{ display:inline-block; max-height:200px; float:left; padding-left:10px; margin-bottom:20px; }
4

0 に答える 0