0

我目前正在使用 Riot Games API，我正在使用引导程序来管理“冠军”的网格，这些图像是从 Riot 的图像库加载的，但有些（4-5）比其他图像低 1px。

这打破了网格，并且由于图像根据屏幕宽度改变高度我无法设置高度来修复它，我宁愿不使用 JS 或 jQuery 来计算每次宽度变化时每个图像的高度，所以我我想知道是否有人单独使用 css 或引导类对此进行了巧妙的修复。

该页面是www.mathias-syversen.net

<div class="row">
<?php foreach ($champs as $champ) { ?>
    <div id="id-<?php echo $champ[id] ?>" class="champion col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="thumbnail">
            <a href="/page/champion.php?id=<?php echo $champ[id] ?>">
                <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/<?php echo $champ[key] ?>_0.jpg" alt="<?php echo $champ[name] ?>">
                <div class="name-tag"><?php echo $champ[name] ?></div>
            </a>
        </div>
    </div>
<?php } ?>
</div>
4

2 回答 2

0

您需要使用相同高度的图像或需要为所有图像定义相同的高度。

第 6 张图像的尺寸为 307*557，其余的尺寸不同。

<div class="thumbnail fix_block"> 
    <a href="/page/champion.php?id=78"> 
        <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Poppy_0.jpg" alt="Poppy">
        <div class="name-tag">Poppy</div>
    </a>
</div>

/* 并进入样式表 */

.fix_block{height:350px}

或者您需要将带有 class = "col-*" 的固定数量的 div 放入带有 class="row" 的单个 div

于 2015-05-29T06:38:58.330 回答
0

如果您可以应用 jquery，则可以使用以下链接中的匹配高度 jquery 插件

http://brm.io/jquery-match-height/ 演示： http: //brm.io/jquery-match-height-demo/

为了使其与高度匹配，请将类放在您想要相同高度的项目上。在包含上面链接中的库后，使用以下代码启动示例

$(function() {
    $('.sameHeight .item').matchHeight();
 })

希望这可以帮助

于 2016-11-10T13:11:39.057 回答