创建三列提要布局

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

我认为你应该浮动你的 .first、.second 和。左边第三个。这样你就会得到正确的顺序

Answer 2

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

您可以使用 CSS3 flex-box 查看 link here
您可以使用 percentages/vw/vh 个单位进行计算

Answer 3

像下面这样使用 flex

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

创建三列提要布局

Create three column feed layout

html

css

apache

feed