Question

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

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

enter image description here

我不知道为什么。这是一些相关的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文件是here，其中所有代码都是。{

$('#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(''));
    ...
});

Answer 1

问题是由空格引起的，它们会影响内联元素（.tile块）。要解决此问题，请将font-size: 0添加到#slideoutInner（父容器）：

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

并更改margin规则的#slideoutInner .tile， 4px。它会解决你的问题。

非动态添加元素上的奇怪CSS错位

1 个答案: