html css の質問です。 写真を画像のように配置したいのですが、緑色の写真が青色の写真下側に配置されてしまいます。 解決策を教えて欲しいです。お願いします。

画像

1人が共感しています

ベストアンサー

1

1人がナイス!しています

その他の回答(3件)

1

とりあえず grid レイアウト。 数字は仮ですので、都合に合わせて下さい。 ● CSS div#grid-3colors {display: grid; grid-template-columns: 200px 240px; grid-template-rows: 250px 350px; gap: 20px; width: 460px; margin: auto;} img#yellow {grid-column: 1; grid-row: 1;} img#green {grid-column: 1; grid-row: 2;} img#blue {grid-column: 2; grid-row: 1 / 3;} ● HTML <div id="grid-3colors"> <img id="yellow" src="images/yellow.png" width="200" height="250"> <img id="green" src="images/green.png" width="200" height="350"> <img id="blue" src="images/blue.png" width="240" height="620">

1人がナイス!しています

あ、いけない div 要素の終了タグをコピーし忘れました。 ● 修正 HTML <div id="grid-3colors"> <img id="yellow" src="images/yellow.png" width="200" height="250"> <img id="green" src="images/green.png" width="200" height="350"> <img id="blue" src="images/blue.png" width="240" height="620"> </div>

2

CSSでZオーダーを指定することで改善可能だと思います。

2人がナイス!しています