2

我暂时为我的网站创建了一个临时快照：http: //hunpony.hu/today/

问题是，在右侧面板中，第一个 divdiv#randomTile.tile有点放错了位置。

在此处输入图像描述

我不知道为什么。以下是一些相关的 HTML、CSS 和 JavaScript：

<div id="slideoutWrapper">
    <div id="slideout">
        <div id="slideoutTitle">
            <h1 class="dyn"></h1>
        </div>
        <div id="slideoutInner">
            <div id="randomTile" class="tile" style="">
                <img class="small" src="img/small/vs.svg">
                <h4>Random<br>&nbsp;</h4>
            </div>
        </div>
    </div>
</div>

...在 CSS 意味着供应商前缀属性中，我删除了它们，因为它使代码块太长。

#slideoutInner .tile {
    cursor: pointer;
    margin:.5em;
    text-align:center;
    display:inline-block;
    width:95px;
    text-overflow: ellipsis;
    ...
    transition-duration: 0.3s;
    box-shadow:0;
    height:127px;
    white-space:nowrap;
    ...
    filter: contrast(100%);
}
#slideoutInner .tile:hover { box-shadow:0px 0px 15px; ...; filter: contrast(150%) }
#slideoutInner .tile .small {
    height:75px;
    width:75px;
    margin:5px auto;
    display:block;
}
#randomTile { color:#777; background-color: #777 }
#slideoutInner .tile h4 {
    line-height: 20px;
    padding:0;
    margin:0px auto 2px;
    display:block;
    text-shadow:none;
    color:white;
}

一些引用的变量太长，这里就不放了，主要的js文件在这里，所有的代码都在这里。 

$('#randomTile').on('click',function(){
    changeBGImage(rndCharNumber);
}).hover(function(){
    rndCharNumber = randomize(0,backImage.length-1);
    $(this).css({color:colorz[rndCharNumber],backgroundColor:colorz[rndCharNumber]});
    $(this).find('img.small').attr('src','img/small/'+backImage[rndCharNumber]+'.svg');
    $(this).find('h4').html((longNames[rndCharNumber].indexOf(' ') != -1) ? longNames[rndCharNumber].split(' ').join('<br>') : longNames[rndCharNumber]+'<br>&nbsp;');
},function(){
    $(this).css({color:'',backgroundColor:''});
    $(this).find('h4').html(locStr.randomTile[locale]);
    $(this).find('img.small').attr('src','img/small/vs.svg');
});

$(document).ready(function(){
    ...
    for (i=0;i<backImage.length;i++){
        imgArray.push('<img class="small" src="img/small/'+backImage[i]+'.svg">');
    }

    for (i=0;i<longNames.length;i++){
        h4Array.push('<h4>'+((longNames[i].split(' ').join('<br>').indexOf('<br>') != -1) ? longNames[i].split(' ').join('<br>') : longNames[i]+'<br>&nbsp;')+'</h4>');
    }

    for (i=0;i < imgArray.length;i++){
        htmlArray.push('<div class="tile" style="color:'+colorz[i]+';background-color:'+colorz[i]+';">'+imgArray[i]+h4Array[i]+'</div>');
    }

    $('#slideoutInner').append(htmlArray.join(''));
    ...
});
4

1 回答 1

3

The issue is caused by white-spaces, they affect inline elements (.tile blocks). To fix it add font-size: 0 to #slideoutInner (parent container):

#slideoutInner {
    overflow-x: hidden;
    text-align: center;
    font-size: 0;
}

and change margin of the #slideoutInner .tile rule, make it e.g. 4px. It will fix your problem.

于 2013-03-09T21:07:16.343 回答