html - 创建三列提要布局

Question

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

|推特提要 |5px pad| facebook 提要 |5px pad| Instagram 提要|

我将 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

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

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