Question

我应该告诉你，而不是尝试描述它。页面准备好后，Ajax将加载朝鲜语文本。右边的英文选项也以这种方式加载，但它们没问题。我能看到的唯一区别是它们是DIV而韩国人是SPAN但是我需要它才能让它重新调整内容的大小，同时保持在同一位置的中心位置。当它被渲染为一个块或甚至浮动时，我无法正确地实现这一点。以前有没有人经历过这个？

enter image description here

这是SPAN #base的CSS，它包含SPAN #basewrap，它是容器

#base
{
background-color: #B8BFCD;
font-size: 35.5pt;
padding: 29px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid;
}
#basewrap
{
width: 591px;
text-align: center;
position: relative;
left: -25%;
top: 51px;
height: 113px;
}


<div style="z-index:100;" id="baselabel"><span class="eng">Korean</span><span                                        class="kor">한국어 단어</span>
<div class="ttslink" onclick="$(&quot;#please&quot;).text(&quot;please be patient!&quo         t;).css(&quot;color&quot;,&quot;green&quot;).fadeIn(300).delay(1400).fadeOut(300);var kor =   $(&quot;#base&quot;).text();var tts = window.open(&quot;http://text-to- speech.imtranslator.net/speech.asp? url=WMfl&amp;dir=ko&amp;text=&quot;+kor,&quot;mywindow&quot;,&quot;location=no,status=no,scr ollbars=no,width=0,height=0&quot;);">
<img alt="korean audio" src="speaker.png"></div></div>
<span id="basewrap"><span id="base">목욕 수건</span></span>

这是执行动态加载的JQuery代码，使用PHP脚本从MySQL中提取单词组并以JSON形式发回

var getset = function (){
$("#qcount").text("/" + qcount);
$("#wincount").text(wincount); 
var percent = parseFloat(wincount/qcount*100).toFixed(0);
if (isNaN(percent)){percent = 0};
$("#percent").text("(" + percent + "%)");
$.ajax({
    type: "POST",
    url: "gamescript.php",
    data: "correct="+correct+"&win="+win+"&id="+baseid,
    success: function(json){
        var r = eval(json);
        if (r.length < 4){alert("there are no new words left! Reloading     page");location.reload();};
        $("#base").html(r[0]["korean"]).data("id", r[0]["id"]);
        random($("#option"));
        $(".option").each(function(){
            $(this).mouseover(function(){
            if($(this).css("background-color")!= "rgb(183, 190, 204)" &&     $(this).css("background-color")!= "rgb(229, 232, 238)")return;
                $(this).css({'background-color' : "#E5E8EE"});
            }).mouseout(function(){
                if($(this).css("background-color")!= "rgb(183, 190, 204)" &&     $(this).css("background-color")!= "rgb(229, 232, 238)")return;
                $(this).css("background-color", "#B7BECC");
            })
        });

        $("#option1").html(r[0]["english"]).data("id", r[0]["id"]).css("background- color","#B7BECC");
        $("#option2").html(r[1]["english"]).data("id", r[1]["id"]).css("background-color","#B7BECC");
        $("#option3").html(r[2]["english"]).data("id", r[2]["id"]).css("background-color","#B7BECC");
        $("#option4").html(r[3]["english"]).data("id", r[3]["id"]).css("background-color","#B7BECC");
        loading = 0;
        },
    error: function(){alert("error")}
});
}

Answer 1

这是一个使用div而不是spans的解决方案，它自动调整内容大小并且包装器保留在原来的位置

http://jsfiddle.net/peter/2aLwB/

Answer 2

谢谢，我实际上通过将所有图标变成精灵来解决问题，事实上，在跨度上方有一个图像导致它变得混乱，现在精灵都有预定的尺寸，一切都很好。回想起来，我可以通过简单地首先指定图像尺寸来修复它。但这样做更好：）

动态加载的文本减少了一半

2 个答案: