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 但 ie 7 和 ie 8 的浏览器中效果很好，我需要一个解决方案。我在想也许我可以通过在 php.ini 中添加类来做到这一点。如果是这样，我将使用哪个功能。php 中是否有类似 nth-child 的选择器？

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 规则，改为添加以下两条规则：

.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 是一个 Javascript 库，它将一系列 CSS 选择器反向移植到旧版本的 IE 中，以便您的标准 CSS 代码可以在所有浏览器中保持不变。

另一种替代方案是一个名为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 回答