Flexdivが正しくレンダリングされない

debugcn 投稿 Dev

CloudyUsa

それぞれの中に2つのフレックスdivがある行があります。1つのdivに画像を表示し、もう1つのdivにテキストを表示します。一部のdivが正しく表示される理由がわかりませんが、他のdivではテキストがオーバーフローします。

ページをリロードするとこのバグは消えますが、キャッシュを削除すると再び発生します。

何か案は？前もって感謝します。

.box {
    position: relative;
    }

    .image-box-right, .image-box-left {
    width: 50%;
    }

    .image-box-left {
    float: left;
    }

    .image-box-right {
    float: right;
    }

    .title {
    font-size: 0.95em;
    }

    .text-box-right, .text-box-left {
    background-color: #d53e73;
    width: 55%;
    height: 80%;
    color: white;
    box-sizing: border-box;
    padding: 15px;
    /* flex align items */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    position: absolute;
    margin-top: 5%;
    top: 0;
    right: 0;
    }

    .text-box-left {
    left: 0;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row box">
        <div class="col-12 px-0">
            <img class="image-box-right" src="img/image1.jpg">
            <div class="text-box-left dark">
                <p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                    <a href="../shared/note.html"> MORE <i class="fa fa-arrow-right"
                                                                                aria-hidden="true"></i></a>
                </p>
            </div>
        </div>
    </div>
    <div class="row box">
        <div class="col-12 px-0">
            <img class="image-box-left" src="img/image2.jpg">
            <div class="text-box-right">
                <p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
                    <a href="../shared/note.html">MORE <i class="fa fa-arrow-right"
                                                                                aria-hidden="true"></i></a>
                </p>
            </div>
        </div>
    </div>

ジョー・フィッツシモンズ

インラインブロックは必要ないと思います。

.notes-text-box-right, .notes-text-box-left {
    background-color: #d53e73;
    width: 55%;
    height: 80%;
    color: white;
    box-sizing: border-box;
    padding: 15px;
    /* flex align items */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    position: absolute;
    margin-top: 5%;
    top: 0;
    right: 0;
    }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]