Question

我创建了一个包装器元素，其中包含2个彼此相邻的内联块框（图片中的浅绿色和黄色）。然后，我创建了另一个两个div，两个div都嵌套在一个内联块中，以使内容居中。它可以工作，但是由于某些原因，即使我不使用任何边距，填充或绝对定位，我的flexbox的垂直位置也会向下移动。如果有人知道为什么会发生这种情况，请赐教！我真的很感激。

视觉表示：

HTML代码：

  <section className="summary">
                <div className="summary-wrapper">

                    <div className="user-wrapper">
                        <div className="user-wrapper__photo">
                            <div className="user-wrapper__photo-avatar">
                                test
                            </div>
                        </div>

                        <div className="user-wrapper__userInfo">
                            <div className="user-wrapper__userInfo-text">
                                <div>Rodney Wormsbecher</div>
                                <div>Software developer</div>
                            </div>
                        </div>
                    </div>

                </div>
            </section>

SCSS代码：

.summary {
    height: 20rem;
    background-color: #333;
    width: 100%;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
    padding: 40px;
    color: white;

    &-wrapper {
        width: 100%;
        height: 8rem;
        // background: red;
    }

    & .user-wrapper {
        display: inline-block;
        width: 20rem;
        height: 5rem;
        background: yellow;

        &__photo {
            display: inline-block;
            background:  aqua;

            &-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
                background: pink;
                height: 5rem;
                width: 5rem;
                border-radius: 50%;
            }

        }

        &__userInfo {
           display: inline-block;

           &-text {
            display: flex;
            padding-left: 1.5rem;
            height: 5rem;
            width: 15rem;
            align-items: flex-start;
            flex-direction: column;
            justify-content:  center;

           }
        }
    }
}

Answer 1

我发现具有display：inline-block的框需要一个'vertical-align：top'属性。然后，我不得不重新调整弹性框项目。

更新的SCSS：

.summary {
    height: 20rem;
    background-color: #333;
    width: 100%;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
    padding: 40px;
    color: white;

    &-wrapper {
        width: 100%;
        height: 8rem;
        // background: red;
    }

    & .user-wrapper {
        display: inline-block;
        width: 20rem;
        height: 5rem;
        background: aqua;
        vertical-align: top;

        &__photo {
            display: inline-block;

            &-avatar {
                display: flex;
                align-items: center;
                justify-content: center;
                background: pink;
                height: 5rem;
                width: 5rem;
                border-radius: 50%;
            }

        }

        &__userInfo {
           display: inline-block;
           vertical-align: top;

           &-text {
            display: flex;
            padding-left: 1.5rem;
            height: 5rem;
            width: 15rem;
            align-items: flex-start;
            flex-direction: column;
            background-color: yellow;
            justify-content: center;
           }
        }
    }
}

Flexbox。元素不在同一高度对齐

1 个答案: