Question

我正在创建一个网站，但我无法在三列中设置我的三个社交媒体供稿。它将被设置为布局看起来像......

我正在使用facebook和twitter的代码来获取Feed小部件和SnapWidget的代码用于Instagram Feed。

这是我的HTML

<!-- feed wrapper -->
  <div class="feed">
    <!-- twitter feed -->
    <div class="first">
      <a class="twitter-timeline"
        data-width="405"
        data-height="780"
        href="https://twitter.com/UMNSkulls">Tweets by UMNSkulls
      </a>
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>

    <!-- facebook feed -->
    <div class="second">
      <div class="fb-page"
        data-href="https://www.facebook.com/PhiKapMN/"
        data-tabs="timeline"
        data-width="405"
        data-height="780"
        data-small-header="true"
        data-adapt-container-width="true"
        data-hide-cover="false"
        data-show-facepile="false">
        <blockquote cite="https://www.facebook.com/PhiKapMN/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/PhiKapMN/">Phi Kappa Sigma at Minnesota</a></blockquote>
      </div>
    </div>

    <!-- SnapWidget -->
    <div class="third">
      <iframe src="https://snapwidget.com/embed/238951" class="snapwidget-widget" allowTransparency="false" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:405px; height:780px; background-color:white;"></iframe>
    </div>
  </div>

这是我的饲料包装的CSS

.feed {
  width: 1300px;
  clear: both;
}

.first {
  width: 405px;
  height: 780px;
  padding-right: 5px;
  float:left;
}
.second {
  width: 405px;
  height: 780px;
  padding-right: 5px;
  float left;
}
.third {
  width: 405px;
  height: 780px;
  float:right;
}

我的网站是here，如果您想查看我在上面发布的代码中遇到的问题。感谢您的任何帮助和批评！

Answer 1

有几种方法可以做到这一点

您可以使用CSS3 flex-box查看链接here
您可以使用百分比/ vw / vh单位计算

Answer 2

我认为你应该漂浮你的.first，.second和。左边第三个。这样你就可以按顺序获得它们

Answer 3

使用下面的flex

.feed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

创建三列供稿布局

3 个答案: