[請益] div並列的問題

看板Web_Design作者 (樂)時間7年前 (2018/06/23 22:53), 7年前編輯推噓3(307)
留言10則, 5人參與, 7年前最新討論串1/1
大家好,又是被公司壓榨的新手遇到問題想來請教 這次是要在網頁上嵌入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

06/23 23:01, 7年前 , 1F
怎不用flexbox排呢?
06/23 23:01, 1F
原本完全不知道這個語法,結果一試馬上成功!!!! 太感謝了嗚嗚嗚嗚 ※ 編輯: yangsen06 (126.140.197.251), 06/23/2018 23:19:36

06/23 23:19, 7年前 , 2F
在class facebook 以及 twitter 的div 加上
06/23 23:19, 2F

06/23 23:19, 7年前 , 3F
style="display: inline-block;"
06/23 23:19, 3F

06/23 23:19, 7年前 , 4F
div 預設的display是block這個屬性會強制換行
06/23 23:19, 4F
原來如此@@,我也用這個方法試看看! 弄了一整天搞不定,結果板友們半小時內幫我解答完成..謝謝大家QAQ ※ 編輯: yangsen06 (126.140.197.251), 06/23/2018 23:22:12

06/24 00:21, 7年前 , 5F
說實話做網站設計5年多從來沒弄懂 float 都盡量避免
06/24 00:21, 5F

06/24 00:21, 7年前 , 6F
還好現在可以用 flexbox 了
06/24 00:21, 6F

06/24 03:13, 7年前 , 7F
float應該寫在class=社群名稱的div 要在同一層
06/24 03:13, 7F

06/24 10:32, 7年前 , 8F
.sns > div { float:left }
06/24 10:32, 8F

06/24 10:38, 7年前 , 9F
.sns:after { content:" "; display:table; clear:both
06/24 10:38, 9F

06/24 10:38, 7年前 , 10F
}
06/24 10:38, 10F
每次來跪求解答都可以學到很多,感謝各位板友!!QAQ ※ 編輯: yangsen06 (126.140.216.73), 06/24/2018 21:23:03
文章代碼(AID): #1RBbxPrv (Web_Design)
文章代碼(AID): #1RBbxPrv (Web_Design)