画像とテキストの配置

Question

例のように画像とそのテキスト表示したいです。
ご教授宜しくお願いいたします。

下のpadding-bottomを 80px 0 にすると表示されますが、合っていますでしょうか。
他に変え方がありますでしょうか。
ご教授宜しくお願いいたします。

.work__content {
width: 420px;
padding-bottom: 80px;
text-align: left;
line-height: 1.8;
}

<!--work-->
<section class="work">
    <div class="u-content-wrapper">
            <h2 class="u-heading">Work</h2>
            <p class="u-text">オーダーメイドでのブーケ・アレンジメントのデザインのほか、<br>ウェディングやイベントの装花なども行なっています。<br>一人一人にあったご提案をさせていただきます。</p>    
    <div class="work__contents__wrapper">
        <div class="work__contents">
        <div class="work__content">
            <img class="work__content__image work__image__gift" src="Web 1280 – 1/work_gift.png" alt="白い花束の写真">
            <h3 class="work__content__heading">Gift</h3>
            <p class="work__content__text">花束をお送りしたいお相手、伝えたいお気持ちに合わ<br>せたプレゼント用花束のアレンジメントをさせていた<br>だきます。花言葉などの豆知識もお伝えします。</p>
        </div>
        <div class="work__content">
            <img class="work__content__image work__image__decoration" src="Web 1280 – 1/work_decoretion.png" alt="ラッピングされたマカロンの写真">
            <h3 class="work__content__heading">Decoration</h3>
            <p class="work__content__text">お写真を彩るお花を一輪から販売。一定期間のご契約<br>で定期的にご自宅へ配送させていただくことも可能で<br>す。</p>

        </div>
        <div class="work__content">
            <img class="work__content__image work__image__wedding" src="Web 1280 – 1/work_wedding.png" alt="白いブーケの写真">
            <h3 class="work__content__heading">Wedding</h3>
            <p class="work__content__text">ウエディングドレスに合わせたブーケや式場の雰囲気<br>に合う装花をご提案。お打ち合わせの流れや回数、費<br>用などにつきましてはお問い合わせください。</p>
        </div>
        <div class="work__content">
            <img class="work__content__image work__image__for_yourself" src="Web 1280 – 1/work_for_yourself.png" alt="部屋に白い花が飾られた写真">
            <h3 class="work__content__heading">For yourself</h3>
            <p class="work__content__text">お部屋の雰囲気やライフスタイルをお聞きしてご自宅<br>用の花束をご提案し、少しでも長く咲かせるコツもお<br>教えします。花束に合った花瓶をご提案することも可<br>能です。</p>
        </div>
      </div>
    </div>
 </div>
</section>
<!--/work-->

/*------------------------------------------------------
 work
------------------------------------------------------*/
.work {
    width: 100%;
    padding-top: 80px;
}

.work__content {
    width: 420px;
    padding-bottom: 80px;
    text-align: left;
    line-height: 1.8;
}

.work__content__image {
    width: 100%;
    margin-bottom: 16px;
}

.work__content__text {
    letter-spacing: 1.5px;
}

.work__contents {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    height: 1680px;
}

.work__content__heading {
    font-size: 24px;
    
}

.work__content:nth-of-type(1) {
    order: 1;
}

.work__content:nth-of-type(2) {
    order: 3;
    margin-top: 120px;
}

.work__content:nth-of-type(3) {
    order: 2;
}

.work__content:nth-of-type(4) {
    order: 4;
}


/*------------------------------------------------------
 /work
------------------------------------------------------*/

Comments

[Lhankor_Mhy]

<div class="u-content-wrapper">
が閉じられていないようですね。

[Lhankor_Mhy]

CSSで指定されている .work__contents が HTMLにはないようですね。.work__contents__wrapperの間違いでしょうか？

Answer 1

現状のスタイルを生かすとして、これではいかがですか。

.work__content:nth-of-type(2)::after {
    content: "";
    display: block;
    height: 1680px;
}

Comments

[risacuspin]

ありがとうございます！

.work__content:nth-of-type(2) {
order: 3;
margin-top: 120px;
}

の下に追記しましたが、反映されませんでした。追記する場所などありますか？

[Lhankor_Mhy]

ああ、回答を投稿する前に質問のコードを編集されているのですね……
それではこの回答は役に立たないと思います。

質問文によると、独力でご解決されているようですから、自己解決で質問を閉じてもよろしいのでは？