@Nasubi_Ryuyaposted at 2020-09-21

HTMLで横並びにした要素の、片方のheightに合わせてもう片方もheightを合わせたい

Q&A

Closed

HTML CSS

解決したいこと

デザインカンプ通りにならないので困ってます。
右の要素(オレンジ(.new-info))の高さに合わせて、左の要素(画像(.new-pic))の
heightを同じにして高さを合わせたいです。

右の要素(オレンジ(.new-info))の行数が増え、heightが高くなった時に、
それに合わせて左の要素(画像(.new-pic))のheightを同じにしたいです。

どうやったら右の要素(オレンジ(.new-info))の高さに合わせて
左の要素(画像(.new-pic))のheightを指定できるのでしょうか？

こんな感じにしたいです↓

こんな感じで行数が増えても、画像のwidhtは固定してheightだけを
右の要素(オレンジ(.new-info))に合わせたいです。

長時間粘ってるんですが解決しないので質問させていただきます🙇‍♂️

該当するソースコード

    <section class="new">
        <h2 class="new-ttl">新着一覧</h2>
        <div class="new-inner">
            <ul class="new-list">
                <li class="new-item">
                    <figure class="new-pic"><img src="./img/sample01@2x.png" alt="">
                        <div class="new-category">カテゴリ1</div>
                    </figure>
                    <div class="new-info">
                        <time class="new-time" datetime="2020.12.01">2020-12-01</time>
                        <div class="new-summary"><a href="">ブログタイトルテキストテキストテキストテキスト</a></div>
                        <div class="new-lead">記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
                    </div>
                </li>
                <li class="new-item">
                    <figure class="new-pic"><img src="./img/sample01@2x.png" alt="">
                        <div class="new-category">カテゴリ1</div>
                    </figure>
                    <div class="new-info">
                        <time class="new-time" datetime="2020.12.01">2020-12-01</time>
                        <div class="new-summary"><a href="">ブログタイトルテキストテキストテキストテキストテキストテキストテキスト</a></div>
                        <div class="new-lead">記事の冒頭文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>

.new {
    padding: 0 25px;

    &-ttl {
        font-size: 32px;
        text-align: center;
        color: $main-col;
        font-weight: bold;
        padding: 58px 0 46px;

    }

    &-inner {
        max-width: 900px;
        margin: 0 auto;
    }

    &-list {}

    &-item {
        display: flex;
        justify-content: space-between;
        position: relative;
        background-color: pink;
        align-items: center;
        margin-bottom: 80px;

    }

    &-pic {
        position: relative;
        width: 240px;
        height: auto;
        display: inline-block;
        img{
            width: 100%;
            height: 100%;
        }

    }

    &-category {
        position: absolute;
        padding: 11px 12px;
        left: 0;
        top: 0;
        background-color: $main-col;
        color: #fff;

    }

    &-info {
        width: 67.777%;
        background-color: $accent-col;

    }

    &-summary {
        font-size: 26px;
        font-weight: bold;
        margin-top: 14px;
        line-height: 1.5;

        a {
            text-decoration: underline;
        }
    }

    &-lead {
        line-height: 1.72;
        font-size: 18px;
        margin-top: 16px;

    }
}

自分で試したこと

右の要素(オレンジ(.new-info))も左の要素(画像(.new-pic))も親要素も
行数が変わるとheightが変化するので
heightを固定するやり方は難しいと思いました。

解決する方法は無いでしょうか？
よろしくお願いします🙇‍♂️

解決しました

周りくどい方法かもしれませんが、、、

まず.new-itemの中に.new-infoと高さを合わせるためのdiv要素を一つ作り、
その中に.new-infoとnew-picを入れます。
そして高さを合わせるために入れたdiv要素にposition:relativeをつけ、.new-picにposition:absoluteをつけます。すると.new-picの基準がdiv要素になります。
ただこのままじゃ、div要素の高さがauto(デフォルト)になっているので画像がはみ出て表示されます。
なので、.new-picのheightを100%としてあげることでdiv要素の中の.new-infoのheightと
同じ高さにすることができました。

Are you sure you want to delete the question?