html css 埋め込みリンクを縦に並ばせたい

本来は、Twitter Discord(下にある埋め込みリンクです。)を縦並びにしたいのですが、どうしても出来ません。教えていただきたいです。
![]
コード
【html】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TEST</title> </head> <body> <div class="TwitterI"> <a class="twitter-timeline" href="https://twitter.com/skaldworld? ref_src=twsrc%5Etfw">Tweets by skaldworld</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> <div class="DiscordS"> <iframe src="https://discordapp.com/widget?id=744467204325507093&theme=dark" width="300" height="590" allowtransparency="true" frameborder="0" sandbox="allow- popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe> </div> </body> </html> 【CSS】 .TwitterI{ width: 300px; height: 590px; float: right; margin-top: 5%; margin-right: 3%; padding: 0; overflow: hidden; } .DiscordS{ float: right; margin-top: 60%; margin-left: 10%; padding: 0; overflow: hidden; }

行動規範の内容に同意します

回答1件

ベストアンサー

floatを使われているので勝手なイメージですが、右側にSNSを埋め込む2カラムにするイメージでしょうか？

HTML
1<div class="wrap">
2  <div id="content"> <!--メインコンテンツ-->　</div>
3  <div id="sns">
4    <div class="TwitterI"> <!-- 埋込コード --> </div>
5    <div class="DiscordS"> <!-- 埋込コード --> </div>
6  </div>
7</div>
8

CSS
1.wrap {
2    display: flex;
3}
4
5#content {
6  width: 100%;
7  min-height: 100vh;
8  background: #f5f5f5;
9}
10
11#sns {
12  margin-left: 30px;
13  width: 300px;
14}
15
16.TwitterI {
17  margin-bottom: 30px;
18  padding: 0;
19  width: 300px;
20  height: 590px;
21  overflow: hidden;
22}
23
24.DiscordS {
25  padding: 0;
26  overflow: hidden;
27}