如何使这 2 个项目直接并排显示在页面上？答案

【问题标题】：How do I make these 2 items appear directly side by side on the page?如何使这 2 个项目直接并排显示在页面上？
【发布时间】：2016-05-21 19:18:32
【问题描述】：

我正在尝试让我的 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

谢谢！

【问题讨论】：

标签： javascript jquery css facebook twitter

【解决方案1】：

试试这个css：

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

【讨论】：

【解决方案2】：

主要是它们不相邻，因为它们太宽而无法放入您的容器div。

它们都需要能够适应容器的 980 像素宽度，因此如果您希望它们并排放置，它们的最大尺寸将为 490 像素。

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

【讨论】：