@sumimon123posted at 2022-01-07

htmlでn枚の図を２枚ずつ段違いに並べて表示したい

Q&A

HTML CSS

解決したいこと

年が明けたことを機にhtmlの勉強を始めました。
が、早速つまずいて困っています、、、

htmlとccsを使って、n枚の図を2つずつ並べて、
それぞれの図の下に文字も記入したいです。
また、右側の図を左側の図よりも少し下にずらしたいです。

試したコードだと、図の下に文字が表示されません。

解決方法を教えていただきたいです。

ソースコード

html

<ul>
    <li>
        <p><img src="images/pic1.jpg" alt=""></p>
        <h3>hoge</h3>
        <p>hogehoge</p>
    </li>
    <li>
        <p><img src="images/pic2.jpg" alt=""></p>
        <h3>hoge</h3>
        <p>hogehoge</p>
    </li>
    <li>
        <p><img src="images/pic3.jpg" alt=""></p>
        <h3>hoge</h3>
        <p>hogehoge</p>
    </li>
    <li>
        <p><img src="images/pic4.jpg" alt=""></p>
        <h3>hoge</h3>
        <p>hogehoge</p>
    </li>
</ul>

css

ul{
    display:flex;
    justify-content:space-evenly;
    flex-wrap:wrap;
    list-style:none;
    margin:0;
    padding:0;
}
li{
    width:40%;
    height:500px;
    margin:2% 0;
    position:relative;
    line-height:500px;
    text-align:center;
}
li:nth-child(2n+2){
    top:50px; 
}

1Answer

@HuyBlancQuest posted at 2022-01-07

FlexBoxまたはGridについて検索してみてください。それは非常に簡単です。
コードペンに書いたサンプルコードを参考にしてください。
この場合、ul、li.tagは使用しないでください。
お役に立てば幸いです。

<div class="container">
    <div class="item item1">
        <div class="item_img"><img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="" class=""></div>
        <h1 class="">title image 1</h1>
        <div class="">description 1</div>
    </div>
    <div class="item item2">
        <div class="item_img"><img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="" class=""></div>
        <h1 class="">title image 2</h1>
        <div class="">description 2</div>
    </div>
    <div class="item item3">
        <div class="item_img"><img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="" class=""></div>
        <h1 class="">title image 3</h1>
        <div class="">description 3</div>
    </div>
    <div class="item item4">
        <div class="item_img"><img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="" class=""></div>
        <h1 class="">title image 4</h1>
        <div class="">description 4</div>
    </div>
</div>

CSS:
.container{
display:flex;
}
.item{
padding-right:50px;
}
.item_img img{
width:80%;
}
.item2{
padding-top:100px;
}
.item3{
padding-top:150px;
}
.item4{
padding-top:200px;
}

1Like

Comments

@HuyBlancQuest
https://codepen.io/huyblancquest/pen/mdBjqBR
@sumimon123
Questioner
ありがとうございます。表示できました。
このコードを書く前に、ulとliを使用して画像を並べて表示していたので、
そのコードを無理に編集しようと頭が固くなっていました。

もっと勉強します。

Are you sure you want to delete the question?