Question

首先，我知道我可以在此方案中对position:absolute快速H1并解决我的问题。我正在寻找的是解释为什么发生以下情况，以及另一个更加流畅的方式，不涉及position:absolute

简化行为的简单示例：JsFiddle

内部div中的H1似乎填充整个单元格并按下右侧的按钮。如果我取消<h1>并使用<strong>或其他内容就可以了。你会看到我的边距和填充设置为0

我很高兴学习一个新的技巧，而我正在摧毁我的css。谢谢！

Answer 1

这样就可以了：https://jsfiddle.net/Marco_Bernardini/6aorkzso/6/

<div class="a-grid">
    <div class="a-grid-row">
        <div class="a-grid-cell">
            <h1 id="zot">Blah Blah Blah</h1>
        </div>
        <div class="a-grid-cell">
            <div class="a-grid-container">
                <div class="a-grid-row">
                    <button>1</button>
                </div>
                <div class="a-grid-row">
                    <button>2</button>
                </div>
                <div class="a-grid-row">
                    <button>3</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.a-grid-container {
    display: table;
    border-collapse: collapse;
}
.a-grid-row {
    display: table-row;
}
.a-grid-cell {
    display: table-cell;
    vertical-align:top;
    border: #f00 1px solid;
    padding: 0;
}
#zot {
    background-color: #cf0;
    margin:0;
    padding: 0;
}

我添加了background-color，以查看h1和vertical-align: top的边界。

Answer 2

您正在使用table layout。 h1元素单元格和按钮单元格位于同一行，因此它们一个接一个地显示在同一行上。但我没有意识到垂直对齐困扰了你。

如果您想提高自己的技能，请查看the flexbox layout。

H1推动DIV内容下降问题

2 个答案: