Question

我的行中每个都有两个flex 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>

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

Answer 2

您在一个CSS规则中编写了两个display设置：

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

第二个覆盖第一个，因此最好将其擦除。

Flex div无法正确呈现

2 个答案: