带有嵌套div的Div非常灵活

Question

我正在寻找一个简单而优雅的解决方案来执行以下操作：

我在StackOverflow上看过一堆Q＆A，但是大多数都以像素为单位描述了一些固定（已知）大小。 我想要实现的是灵活的布局，其中：

1）将div定位在一定的垂直位置并使其具有一定的高度 - >用设定position: fixed; top: 30%; height: 40%;求解position: fixed; top: 30%; height: 40%; position: fixed; top: 30%; height: 40%;

2）将div放在水平中心位置 - <尝试width: auto; margin: 0 auto; width: auto; margin: 0 auto; 但这没用

3）调整嵌套div的大小（我现在正在使用跨度，但在这种情况下可能无关紧要），它们的高度等于它们的宽度和1行的高度等于1/3（大致）的父div。 此外，我希望那些嵌套的div是内容不可知的，即根据div的大小设置字体大小，而不是通过增加文本大小来推动div。 此外，如果我从嵌套的div中排除几个标题，到目前为止整个事情都会破裂

到目前为止它看起来像这样：

我很确定这是可以实现的，没有任何js，我很乐意就此得到任何建议。

谢谢

更新1：我正在用小提琴链接更新帖子，感谢Sari的建议。

Answer 1

您可能需要考虑使用flexbox进行此布局。 就其本质而言，flexbox是一种灵活的盒子 。

尝试这个：

HTML （没有改变你的小提琴演示 ）

<div id="flexdiv">
    <div id="li1" class="li">
        <span id="l1" class="l">1</span>
        <span id="l2" class="l">2</span>
        <span id="l3" class="l">3</span>
        <span id="l4" class="l">4</span>
    </div>
    <div id="li2" class="li">
        <span id="l5" class="l">5</span>
        <span id="l6" class="l">6</span>
        <span id="l7" class="l">7</span>
        <span id="l8" class="l">8</span>
    </div>
    <div id="li3" class="li">
        <span id="l9" class="l">9</span>
        <span id="l10" class="l">A</span>
        <span id="l11" class="l">B</span>
        <span id="l12" class="l">C</span>
    </div>
</div>

CSS

html, body { height: 100%; } 

body {
    display: flex; /* establish flex container */
    justify-content: center; /* center #flexdiv horizontally */
    align-items: center; /* center #flexdiv vertically */
}

#flexdiv {
    display: flex; /* establish (nested) flex container */
    flex-direction: column; /* align li boxes vertically */
    height: 48vmin; /* height relative to viewport size */
}

.li {
    display: flex;
    text-align: center;
    height: 16vmin; /* height relative to viewport size */
}

.l {
    width: 16vmin; /* boxes maintain aspect ratio */
    line-height: 16vmin; /* vertically center text */
    font-size: 7vmin; /* font size scales */
}

演示： http ： //jsfiddle.net/6bsoze4z/4/

Answer 2

尝试使用calc函数设置top：

top: calc(30%);