創建三欄饋送佈局

我正在創建一個網站，我無法在三欄中設置我的三個社交媒體饋送。它將被設置爲使得佈局看起來像...創建三欄饋送佈局

我正在使用Facebook和Twitter的代碼來提供供稿窗口小部件和SnapWidget的instagram供稿代碼。

這裏是我的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，如果你想看到我與我的代碼有問題張貼在上面。感謝任何和所有的幫助和批評！

來源

2016-08-22 JJ Stamp

有幾個方法可以做到這

您可以使用CSS3彈性盒退房的鏈接here
可以計算使用百分比/ VW/VH單位

來源

2016-08-22 20:01:44 Naresh

您也可以使用CSS3列布局（受限瀏覽器支持）http://www.w3schools.com/css/css3_multiple_columns.asp – Naresh

我認爲你應該漂浮你的.first，.second和。第三位在左邊。這樣，你會得到他們在正確的順序

來源

2016-08-22 19:57:01 Roland

檢查了這一點：http://codepen.io/ro landas/pen/LkoLvN？editors = 1100＃0 – Roland

使用Flex像下面

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

來源

2016-08-22 20:29:26

創建三欄饋送佈局

回答

相關問題