html - CSS:为什么div block 的高度会随着内容而变化？

Question

我是 CSS 和 Html 的新手。我创建了一个包含两个 div block 的页面:标题 block (上方)和主要内容 block (下方)。嵌套在内容 block 中的是另外三个 div block ，我希望它们相互内联。当嵌套 block 只有简单的文本时，布局是完美的。添加内容时，例如标题文本或 Django 内容，嵌套 block 的垂直位置会相互改变。为什么是这样？这是我正在使用的基本代码

<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

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

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

这里有一个简单的例子:View CodePen