CSS：为什么div块的高度随内容而变化？

Question

我是CSS＆amp; HTML。我创建了一个包含两个div块的页面：header block（上面）和一个主内容块（下面）。嵌套在内容块中的是另外三个div块，我希望彼此内联。当嵌套块只有简单的文本时，布局是完美的。当添加内容时，例如标题文本或Django内容，嵌套块的垂直位置相对于彼此改变。为什么是这样？这是我正在使用的基本代码

<div id="contentBlock">
            <div id = "leftBlock">
                leftBlock
            </div>
            <div id = "centreBlock" >
                this is the centre
                {{ questions.author }}
            </div>
            <div id = "rightBlock">
                <h2> Other questions</h2>
                {% for quest in questions %}
                    <h3><a href="">{{ quest.question }}</a></h3>
                    <p>{{ quest.text|linebreaks }}</p>
                {% endfor %}
            </div>
        </div>

#contentBlock {
    text-align: center;
    border: solid 2px;
}
#centreBlock {
    display: inline-block;
    width: 39%;
    background-color: #fed325;
}
#leftBlock {
    display: inline-block;
    width: 30%;
    background-color: #25effe;
}
#rightBlock {
    display: inline-block;
    width: 30%;
    background-color: #25effe;
}

这就是它的样子

Answer 1

您需要使用最小高度属性。

Answer 2

您可以根据最大内容块的高度为所有内容块设置min-height，以确保它们保持相同的大小。

此外，如果您的元素的显示属性设置为inline-block，则可以使用vertical-align:middle确保所有内容块保持彼此内联。

这里有一个简单的示例：View CodePen