Flexboxを横に2列並べてレシポンシブに動くように作成しているつもりなのですが、下記のソースでinfofl-item2にh3とリストを作成したらinfofl-item2のリストがh3の下に来なくて右横に来てしまいました。希望はh3の下にリストを配置したいのですが。初心者なのでどこが悪いかわかりませんまた、teratailの使用も初めてで上手く伝わるかわかりませんがよろしくお願いいたします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Introduction to CSS(flex-basis)</title> <script src="js/flexibility.js"></script> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100%; } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 40%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl{ display: block; } .infofl > div{ width: 100%; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : yellow;"> <dl> <dt>■test1 <dd>test <dd>test <dt>■test2 <dd>test <dd>test <dt>■test3 </dl> </div> <div class="infofl-item2" style="background-color : silver;"> <h3 style="color : white;background-color : #212121;padding-top : 0.5em;padding-left : 0.5em;width : 98%;height : 1.5em;">お知らせ・新着情報</h3> <dl> <dt>■test1 <dd>test <dt>■test2 <dt>test <dt>■test3 <dt>■test4 <dt>■test5 </dl> </div> </div> </body> </html>回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/04 07:29