作者yangsen06 (乐)
看板Web_Design
标题[请益] div并列的问题
时间Sat Jun 23 22:53:09 2018
大家好，又是被公司压榨的新手遇到问题想来请教
这次是要在网页上嵌入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&tabs=timeline&width=300&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1529765593.A.D79.html
1F：推 cd12631: 怎不用flexbox排呢？ 06/23 23:01
原本完全不知道这个语法，结果一试马上成功！！！！
太感谢了呜呜呜呜
※ 编辑: yangsen06 (126.140.197.251), 06/23/2018 23:19:36
2F：推 steven11329: 在class facebook 以及 twitter 的div 加上 06/23 23:19
3F：→ steven11329: style="display: inline-block;" 06/23 23:19
4F：→ steven11329: div 预设的display是block这个属性会强制换行 06/23 23:19
原来如此@@，我也用这个方法试看看！
弄了一整天搞不定，结果板友们半小时内帮我解答完成..谢谢大家QAQ
※ 编辑: yangsen06 (126.140.197.251), 06/23/2018 23:22:12
5F：推 ymcheung: 说实话做网站设计5年多从来没弄懂 float 都尽量避免 06/24 00:21
6F：→ ymcheung: 还好现在可以用 flexbox 了 06/24 00:21
7F：→ sylviami: float应该写在class=社群名称的div 要在同一层 06/24 03:13
8F：→ xdraculax: .sns > div { float:left } 06/24 10:32
9F：→ xdraculax: .sns:after { content:" "; display:table; clear:both 06/24 10:38
10F：→ xdraculax: } 06/24 10:38
每次来跪求解答都可以学到很多，感谢各位板友!!QAQ
※ 编辑: yangsen06 (126.140.216.73), 06/24/2018 21:23:03