html - 根据文本调整框的宽度

Question

我正在为我的游戏社区制作一个服务器状态站点。我偶然发现了一个问题，盒子的高度没有随文本改变。

This is the site

这是我目前的 CSS:

.explain_container {
    border: 1px solid #BFC4C7;
    background: white;
    width: 1000px;
    height: 120px;
    position: relative;
    font-size: 14px;
    color: #5A5A5A;
}
.explain_text {
    width: 900px;
    height: 50px;
    position: relative;
    top: 50px;
    margin-left: auto;
    margin-right: auto;
}

这是我的 HTML:

<div class="explain_container">
    <div class="explain_text">
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
        Text that's longer should extend the height of the box.
    </div>
</div>

所有 4 个边都应该有大约 50 像素的边距。我该如何解决这个问题？

Answer 1

我通过使用 .explain_container 并在所有边上使用填充来相当容易地解决了这个问题!根本没有定义高度!