Flex div 无法正确渲染答案

【问题标题】：Flex div not render correctlyFlex div 无法正确渲染
【发布时间】：2019-12-12 17:18:10
【问题描述】：

我有一排里面有两个 flex div。在一个 div 中，我显示图像，在另一个 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>

【问题讨论】：

你在使用 boostrap 4 吗？因为从你的代码中，有引导类，我没有看到你的错误codepen.io/gc-nomade/pen/KKPeMqg（没有必要删除并再次提出你的问题，有时助手不在身边;））
是的，我正在使用 boostrap 4，很抱歉我删除了它，因为我无法正确编辑它。
从这里我们并没有真正看到你的错误，你检查过你的代码的有效性吗？ else margin-top:5%; 以父母的宽度作为参考，而不是高度，这是你的意思吗？
我已经解决了，是html加载的问题。 CSS很好。非常感谢！

标签： css bootstrap-4 flexbox

【解决方案1】：

我认为你不需要内联块：

.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;
    }

【讨论】：

你是对的！我已将其删除，但问题仍然存在。
@Juliette 你能添加更多关于实际问题的描述吗？最终目标应该是什么样的？
是的，我又添加了一张图片，向大家展示它的外观。
@Juliette 你能造一支笔吗？修改后遇到问题
我已经解决了，是html加载的问题。 CSS很好。感谢您的回答！

【解决方案2】：

您在一个 CSS 规则中编写了两个 displaysettings：

.notes-text-box-right, .notes-text-box-left {
  [...]
  display: flex;
  [...]
  display: inline-block;
  [...]
}

第二个会覆盖第一个，所以你最好删除它。

【讨论】：

是的，对不起。我已经删除了它，但问题仍然存在。我已经编辑了原始代码。