Question

我有一个div＃content1，我有一些文章，我想要留下我左边的文章图片，然后是右边的新闻内容...而且我已经有了这个工作正常。

但我也有一个facebook分享按钮，发生了一些奇怪的事情，当我访问我的页面“localhost / project / index.php”时，我的页面没有分享按钮，而且我的页面显示有点未格式化，并且仅在一段时间后，我的分享按钮出现并且页面结构会调整。

这会给人留下不好的印象，因为我们会在分享按钮出现时看到组织结构的页面。

有人已经有这样的问题，可以帮我解决这个问题吗？

这是我的问题代码：http://jsfiddle.net/J9bAd/3/

/ ******* HTML ******** /

<div id="content1">
            <h1>News</h1>
<article class="news">
             <div class="image_container">
                <img class="img_principal" src="../image3.jpg"/> 
             </div>
             <h2><a href="#" >Title</a><br /></h2>
             <span>Date</span>
             <p> This is my Paragraph... <a  href="#">Read more....</a> </p>
             <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
         <div id="separator"></div>
  </article>

 <article class="news">
             <div class="image_container">
                 <img  src="../image3.jpg"/> 
             </div>
             <h2><a href="#" >Title</a><br /></h2>
             <span>Date</span>
             <p> This is my Paragraph... <a  href="#">Read more....</a> </p>
             <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
         <div id="separator"></div>
  </article>
</div>

/ ******* CSS ***** /

#content1
{
    float:left;
    width:870px;
    background:yellow;
}

#content1 h1
{
    font-size:23px;
    font-weight:100;
    margin-bottom:10px;
}

.news
{
    height:auto; 
    position:relative;
    margin-bottom:10px;
}


.image_container 
{
   width: 160px;
   height: 165px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
   margin-right:20px; 
   border:3px solid #f3f3f3;
   margin-top:4px;  
}

.news h2 a
{
    font-size:21px;  
    color:#3B5998; 
    text-decoration:none;
    margin-left:0;
    font-weight:100;
}


.news p
{

    font-size: 18px;  
    text-align:justify; 
    margin-top:5px;
    margin-bottom:5px;
    line-height:25px;
    word-spacing:-2px;
}    

.fb-share-button
{
    text-decoration:none;
}

#separator
{
    width:870px;
    margin:14px auto 10px auto;
    height:1px;
    background: #f3f3f3;
}

Answer 1

问题是页面加载后按钮是异步加载的。可能的解决方案是为它预留固定尺寸的容器。

因此页面将包含此固定大小的容器，然后按钮将被加载到容器中。

当我访问我的页面时，我的分享按钮不会立即显示，当它出现时我们看到页面调整

1 个答案: