javascript - 如何防止两个 div 在我的网页首次加载时跳来跳去？

Question

感谢您的帮助!当页面最初加载时，我遇到以下代码问题。 div 类“highlights”包含 div“box”和“box-2”，在加载时在页面周围跳转。我怀疑这与在 div 上方运行 javascript 的社交媒体按钮有关，但无法弄清楚如何让一切保持静止。这是 site 的链接.谢谢大家的帮助!!

<div class="buttons">

    <div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB-                          power-rankings/week-18.html" data-layout="button_count">
    </div>

    <div class="twitter-button"><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)                                                       [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))                                       {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
     </div>

    <div class="g-plus" data-action="share" data-annotation="bubble" data-                                            href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html">             </div>    

</div>        

<div class="highlights">    
        <div class="box">
            <div class="box-header"><p>What to Watch</p></div>
                <div class="box-content">
                    <div class="game-details">
                    </div>
                    <div class="game-overview">
                        <div class="away-team">
                            <div class="away-team-logo">
                                <img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
                            </div>
                                <div class="record">
                                    <h6>Dodgers</h6>
                                    <h6 class="lighter">(60-45)</h6>
                                </div>    
                        </div>
                        <div class="home-team">
                            <div class="home-team-logo">
                                <img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
                            </div>
                            <div class="record">
                                <h6>Pirates</h6>
                                <h6 class="lighter">(61-43)</h6>
                            </div> 
                        </div>
                        <div class="symbol">@</div>
                    </div>

                </div>
                        <div class="date"> 
                            <h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
                        </div>    
        </div>

        <div class="box2">
            <div class="box2-header"><p>Biggest Movers</p></div>
                <div class="rise">   
                    <div class="rise-up"><img src=../../Images/arrowGW.gif></div>
                    <div class="rise-number"><p>5</p></div>
                    <div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>      
                </div>
                <div class="fall">
                    <div class="fall-down"><img src=../../Images/arrowRW.gif></div>
                    <div class="fall-number"><p>5</p></div>
                    <div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
                </div>    
        </div>
</div>

Answer 1

如果您不介意使用 javascript，您可以使用 display: hidden 隐藏容器框，然后在 javascript onload 函数中将显示设置回 block 。

分区:

<div id="highlightDiv" class="highlights" style="display: hidden">
    ...
</div>

加载:

window.onload = function() {
    document.getElementById("highlightDiv").style.display = "block";
}