[請益] div並列的問題

[yangsen06 (樂)]

大家好，又是被公司壓榨的新手遇到問題想來請教

這次是要在網頁上嵌入SNS頁面

想要同一排中讓臉書欄在左邊，Twitter欄在右邊

寫好兩個div，float設left，卻變成這樣...

https://imgur.com/5hunKfB.png

右邊的欄不知道為何歪掉了QAQ

這是我的code：

<div class="sns">
<div class="facebook">
<h3><span class="title">FACEBOOK</span></h3>
<div style="float: left; margin: 20px;">
<iframe style="border: none; overflow: hidden;"
src="https://www.facebook.com/plugins/page.php?
href=https%3A%2F%2Fwww.facebook.com%2F*************%2F&amp;tabs=timeline&amp;width=300&amp;height=500&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=false&amp;appId" width="300" height="500" frameborder="0" scrolling="no">
</iframe></div>
</div>
<div class="twitter">
<h3><span class="title">TWITTER</span></h3>
<div style="float: left; margin: 20px;">
<a class="twitter-timeline" href="https://twitter.com/*******?ref_src=twsrc%5Etfw" data-width="300" data-height="500">Tweets by *******</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script></div>
</div>
</div>

不知道是哪裡有錯呢...跪求板友相助～～QQ

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 126.140.197.251
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1529765593.A.D79.html
推 cd12631: 怎不用flexbox排呢？
原本完全不知道這個語法，結果一試馬上成功！！！！
太感謝了嗚嗚嗚嗚
※ 編輯: yangsen06 (126.140.197.251), 06/23/2018 23:19:36
推 steven11329: 在class facebook 以及 twitter 的div 加上
→ steven11329: style="display: inline-block;"
→ steven11329: div 預設的display是block這個屬性會強制換行
原來如此@@，我也用這個方法試看看！
弄了一整天搞不定，結果板友們半小時內幫我解答完成..謝謝大家QAQ
※ 編輯: yangsen06 (126.140.197.251), 06/23/2018 23:22:12
推 ymcheung: 說實話做網站設計5年多從來沒弄懂 float 都盡量避免
→ ymcheung: 還好現在可以用 flexbox 了
→ sylviami: float應該寫在class=社群名稱的div 要在同一層
→ xdraculax: .sns > div { float:left }
→ xdraculax: .sns:after { content:" "; display:table; clear:both
→ xdraculax:  }
每次來跪求解答都可以學到很多，感謝各位板友!!QAQ
※ 編輯: yangsen06 (126.140.216.73), 06/24/2018 21:23:03