Question

我想让我的Facebook时间表和我的Twitter时间表在我的网站上直接显示在彼此旁边。我还没弄清楚怎么做。要查看现在的情况，它位于页面底部bustersusa.com

我花了很多时间试图弄清楚如何自己做这件事而我却做不到。先感谢您。

<div class="fb-page" data-href="https://www.facebook.com/bustersgourmetsauces/" data-tabs="timeline" data-width="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
    <div class="fb-xfbml-parse-ignore">
        <blockquote cite="https://www.facebook.com/bustersgourmetsauces/">
            <a href="https://www.facebook.com/bustersgourmetsauces/">Buster&#039;s Gourmet Sauces</a>
        </blockquote>
    </div>
</div>
<a class="twitter-timeline" href="https://twitter.com/BustersGourmet" data-widget-id="697564074893127680">Tweets by @BustersGourmet</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 id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/bustersgourmetsauces/" data-tabs="timeline" data-width="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
    <div class="fb-xfbml-parse-ignore">
        <blockquote cite="https://www.facebook.com/bustersgourmetsauces/">
            <a href="https://www.facebook.com/bustersgourmetsauces/">Buster&#039;s Gourmet Sauces</a>
        </blockquote>
    </div>
</div>
<a class="twitter-timeline" href="https://twitter.com/BustersGourmet" data-widget-id="697564074893127680">Tweets by @BustersGourmet</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>

They are on top of each other now

谢谢！

Answer 1

试试这个css：

.fb_iframe_widget {
float:left;
width:50%;
}
#twitter-widget-0 {
float:left;
width:50%;
}

Answer 2

主要是因为它们太宽而无法容纳在您的容器div中，所以它们并不紧挨着。

它们都需要能够适应容器的980像素宽度，因此如果你想要它们并排的最大尺寸是490px。

假设您直接抓取代码，应该有一种方法来设置这两个小部件的宽度。

如何将这两个项目直接并排显示在页面上？

2 个答案: