0

次のように表示される一連の画像を呼び出すphpスクリプトがあります。

これは、それらを呼び出す php コードです。

<?php

$query = "SELECT
parent_business_id,
image_url,
alt_tag,
description,
thumb_url,
business
FROM
images
ORDER BY
RAND()
LIMIT
6
";

$result = mysql_query($query, $dbc)
or die (mysql_error($dbc));

while($row = mysql_fetch_array($result)) {

$parent = $row["parent_business_id"];
$image = $row["image_url"];
$alt = $row["alt_tag"];
$description = $row["description"];
$thumb = $row["thumb_url"];
$business = $row["business"];

$mainthumb = "./images/270x270/$image.jpg";

echo

"<div class='gallery_image_container'>

<a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>

</div>";

}

?>

現時点では、css3 の nth-child を使用して中央の画像にマージンを追加しています。

div.gallery_image_container:nth-child(3n+2){
margin-left:10px;
margin-right:10px;
}

私が抱えている問題は、css3 をサポートするブラウザーではこれがうまく機能することですが、つまり 7 と 8 ではサポートされず、解決策が必要です。PHPでクラスを追加することでこれを行うことができるのではないかと考えています。もしそうなら、どの機能を使用しますか。PHPにセレクターのようなn番目の子はありますか?

4

3 に答える 3

1

Andy がコメントで述べたように、PHP でクラスを追加する必要がある要素を見つけることができます。必要なのは剰余除算だけです。

純粋な CSS ソリューションでは、HTML を改善する必要があります。これは明らかに画像のリストです。したがって、リストを使用します。結果の HTML は次のようになります。

<ul class="gallery_container">
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    […]
</ul>

CSS で :nth-child ルールを削除し、代わりに次の 2 つのルールを追加します。

.gallery_container {
    margin: 0 0 0 -20px;
    padding: 0;
    list-style: none;
}
.gallery_container > li {
    margin: 0 0 0 20px;
    padding: 0;
    float: left;
}
于 2013-02-07T11:34:04.777 に答える
0

nth-childIE8 でサポートされていないような CSS セレクターを使用する場合は、 Selectivizrを使用することをお勧めします。

Selectivizr は、全範囲の CSS セレクターを古いバージョンの IE にバックポートする Javascript ライブラリです。これにより、標準の CSS コードがすべてのブラウザーで変更されずに機能します。

もう 1 つの代替手段は、ie7.js (およびその後のバージョンの ie8.js と ie9.js) と呼ばれる古いスクリプトです。これも同じようなことを行い、さらに IE の他の多くのバグや癖を修正します。しかし、私の好みは Selectivizr です。それは、よりターゲットを絞った (つまり、ie7.js ほどではありません) ことと、そのはるかに新しいコードであるためです。

于 2013-02-07T11:42:02.747 に答える
-1

あなたが試すことができます

$(identifier:nth-child(3n+2)').addClass('styleClassName');

jQueryの使用

于 2013-02-07T11:22:39.060 に答える