前提・実現したいこと
ここにより詳細な情報を記載してください。
flexで横並びのメニューで一部を縦並びにしたい
ul、liでメニューを作成しました。
画像を2個をセットにして作成しています。
メニューの中で電話番号とFAX番号は画像を横並びに、他のメニューは画像の下に来るように作りました。
その中で電話番号とFAX番号の横並びにしたまま縦並びにしたいのですがうまくいきません。
gazou1とgazou2の下にgazou3とgazou4を上下に並べたいです。
申し訳ありませんが皆さまお力をかしてください。
宜しくお願い致します。
<ul class="menu"> <li><p><img src="a.png" alt="ロゴ"></p></li> <li><p><img src="gazou1.png" alt="a"></p></li> <li><p><img src="gazou2.png" alt="a2"></p></li></div> <li><p><img src="gazou3" alt="a3"></p></li> <li><p><img src="gazou4.png" alt="a3"></p></li></div> <!-- ここまでは画像横並び --> <li><p><img src="gazou5.png" alt="~"></p><img src="gazou6.png" alt="a4"></li> <li><p><img src="gazou6.png" alt="~"></p><p><img src="gazou7.png" alt="a5"></p></li> <li><p><img src="gazou8.png" alt="~"></p> <p><img src="gazou9.png" alt="a6"></p></li> <li><p><img src="gazou10.png" alt="~"></p><p><img src="gazou11.png" alt="a7"></p></li> <li><p><img src="gazou12.png" alt="~"></p><p><img src="gazou13.png" alt="a8"></p></li> <!--ここまで子要素縦改行--> </ul>
CSSコード
1div{ 2 max-width: 1000px; 3 margin-right:auto; 4 margin-left:auto; 5} 6 7.menu{ 8 display: -webkit-flex; 9 display:flex; 10 justify-content: center; 11 align-items:start; 12 flex-wrap: wrap; 13 14} 15li{ 16 list-style-type:none; 17 18} 19p{ 20 align-items:start; 21 margin:0; 22} 23 24h1,h2,footer{ 25 text-align:center; 26} 27img{ 28 max-width: 100%; 29 display:block; 30 margin-right: auto; 31 margin-left: auto; 32} 33ul{ 34 padding: 0; 35 36} 37
試したこと
divタグを入れてgazou3とgazou4をdisplay:inline-blockをCSSで指定したんですが、レイアウトが壊れてしまいしました。
align-selfで設定できるかなと考えていたのですがgazou3とgazou4を横並びに指定したままgazou1とgazou2の下にレイアウトする方法を調べたのですが
見つかりませんでした。
回答1件
あなたの回答
tips
プレビュー