Question

由于<p>标记的存在，为什么我的<ins>元素中的文字被推下？如果您通过开发人员工具从DOM中删除<ins>标记，您将看到我的文本被置于我期望的位置。

＆＃13;

main {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

#portal-wrapper {
    width: 100%;
    padding: 40px 0;
    background: #fff;
}

aside {
    width: 100%;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    position: relative;
}

@media only screen and (min-width: 795px) {

    main {
        display: table;
    }

    #portal-wrapper {
        display: table-cell;
        min-width: 400px;
        max-width: 680px;
        width: auto;
    }

    aside {
        width: 300px;
        display: table-cell;
        padding-right: 0;
        padding-top: 41px;
    }

}

＆＃13;

<main>
    <div id="portal-wrapper">
        <div id="portal">
            <p>
              Here's my text. Why am I pushed down so far.
            </p>
        </div>
    </div>
    <aside>
        <ins style="display: block; height: 600px;">      </ins>
    </aside>
</main>

＆＃13;

在这里小提琴：https://jsfiddle.net/wwvq7net/1/

Answer 1

您可以使用vertical-align: top属性：

＆＃13;

main {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

#portal-wrapper {
    width: 100%;
    padding: 40px 0;
    background: #fff;
}

aside {
    width: 100%;
    padding: 10px 20px 20px;
    box-sizing: border-box;
    position: relative;
}

@media only screen and (min-width: 795px) {

    main {
        display: table;
    }

    #portal-wrapper {
        display: table-cell;
        vertical-align: top;
        min-width: 400px;
        max-width: 680px;
        width: auto;
    }

    aside {
        width: 300px;
        display: table-cell;
        vertical-align: top;
        padding-right: 0;
        padding-top: 41px;
    }

}

＆＃13;

<main>
    <div id="portal-wrapper">
        <div id="portal">
            <p>
              Here's my text. Why am I pushed down so far.
            </p>
        </div>
    </div>
    <aside>
        <ins style="display: block; height: 600px;">      </ins>
    </aside>
</main>

＆＃13;

JSFiddle

Answer 2

当您设置display:table-cell时，这些元素会自动以vertical-align:baseline开头，这就是为什么#portal被推到#portal-wrapper的底部。

更改为vertical-align:top或其他值以解决此问题。详细了解vertical-align here。

<ins>元素在单独的div中向下推送内容

2 个答案: