嵌套div上的HTML和CSS

Question

我在构建一些嵌套的div时遇到了麻烦。

我有以下结构：

<div id="master">
    <div id="number">
        <p>123</p>
    </div>
    <div id="content">
        <h1>Title</h1>
        <p>Some content here.</p>
    </div>
</div>

您可以在此处查看可视示例：

• 第一个div，即“主人”，只是为了保留东西 组织的。
• 称为“内容”的div将填充一些 来自数据库的信息，因此它不能具有任何固定的高度。 但是，可以指定最小高度。
• div称为“数字” 必须灵活，以遵循“内容”div的高度和 显示与其中心对齐的数字（text-align和 垂直对齐）。

我上传的图片可以帮助您了解我的需求。我一直在尝试很多CSS代码，但它们都没有用。

编辑1：

这是我最接近它的工作（但数字没有垂直对齐div的中间）。

#master {
    display: flex;
    background-color: #ffffff;
}

#number {
    float: left;
    width: 100px;
    vertical-align: middle; /* DOESN'T WORK */
    text-align: center;
}

#content {
    float: left;
    width: 450px;
}

Answer 1

您可以尝试CSS表格：

#master {
    display: table-row;
}
#number, #content {
    display: table-cell;
}

然后，

#number {
    background: red;
    width: 100px;
    vertical-align: middle;
    text-align: center;
}
#content {
    background: blue;
    width: 450px;
    min-height: 100px;
}

Demo