帶有嵌套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%);