こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

FlexboxのレシポンシブCSSで困ってます2

Proof4さんスミマセン!再度質問させてください。教えて頂いた通りにしたらboxのレシポンシブ化は出来たので、infofl-item2にh3とリストを作成したらinfofl-item2のリストがh3の下に来なくて右横に来てしまいました。どこが悪いのかわかりません?お手数ですが教えて下さい。
<!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>
何度お尋ねしてもうしわけありまんがよろしくお願いいたします。

投稿日時 - 2019-06-04 14:53:36

QNo.9622905

すぐに回答ほしいです

質問者が選んだベストアンサー

.infofl-item2にdisplay: flexが指定されているため、.infofl-item2直下の子要素が横並びになっています。
.info-item2のdisplay: -webkit-flexおよびdisplay:flexの記述を削除するか、flex-direction:columnを指定してください。

投稿日時 - 2019-06-04 21:31:01

お礼

ありがとうございました。上手くできました。

投稿日時 - 2019-06-05 23:52:38

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問