CSS 的正方形内的正方形

Question

我试图在一个大正方形内有 4 个小正方形。 那些小方块需要在大方块的底部是 position，到目前为止我的代码看起来像这样

 .date-grid button { position: relative; border: 0; width: 7.5ch; height: 7.5ch; background-color: #A1A100; margin-bottom: 2px; }.smallHolder { display: flex; align-items: flex-end; }.small1 { border: 0; width: 2.5ch; height: 2.5ch; background-color: gray; }.small2 { width: 2.5ch; height: 2.5ch; background-color: red; }.small3 { border: 0; width: 2.5ch; height: 2.5ch; background-color: green; }.small4 { border: 0; width: 2.5ch; height: 2.5ch; background-color: blue; }

 <div class="date-grid"> <button class="vrs22"> <time>3</time> <div class="smallHolder"> <div class="small1"></div> <div class="small2"></div> <div class="small3"></div> <div class="small4"></div> </div> </button> </div>

我想要实现的是：

想法是要有这种灵活性，所以如果我有 2 个小方块，结果应该是这样的：

有人可以帮我解决这个问题吗？

Answer 1

这可能是一个解决方案。 它使用您未更改的 HTML，但使用完全不同的 CSS。 改变外部容器的height和width仍然会产生 4 个小方块，只要外部容器的宽度和高度相等。

 * { box-sizing: border-box; }.date-grid { width: 100px; height: 100px; background: #eee; display: flex; flex-direction: column; }.vrs22 { width: 100%; height: 100%; background: green; border: none; padding: 0; } time { display: block; height: 75%; font-size: 24px; display: flex; flex-direction: column; justify-content: center; }.smallHolder { width: 100%; height: 25%; display: flex; }.smallHolder>div { width: 25%; height: 100%; flex-shrink: 0; flex-grow: 1; }.small1 { background: #fb0; }.small2 { background: #bf0; }.small3 { background: #f07; }.small4 { background: #ba0; }

 <div class="date-grid"> <button class="vrs22"> <time>3</time> <div class="smallHolder"> <div class="small1"></div> <div class="small2"></div> <div class="small3"></div> <div class="small4"></div> </div> </button> </div>

使用不同的容器尺寸：

 * { box-sizing: border-box; }.date-grid { width: 150px; height: 150px; background: #eee; display: flex; flex-direction: column; }.vrs22 { width: 100%; height: 100%; background: green; border: none; padding: 0; } time { display: block; height: 75%; font-size: 24px; display: flex; flex-direction: column; justify-content: center; }.smallHolder { width: 100%; height: 25%; display: flex; }.smallHolder>div { width: 25%; height: 100%; flex-shrink: 0; flex-grow: 1; }.small1 { background: #fb0; }.small2 { background: #bf0; }.small3 { background: #f07; }.small4 { background: #ba0; }

 <div class="date-grid"> <button class="vrs22"> <time>3</time> <div class="smallHolder"> <div class="small1"></div> <div class="small2"></div> <div class="small3"></div> <div class="small4"></div> </div> </button> </div>

底部只有两个正方形的变体：

 * { box-sizing: border-box; }.date-grid { width: 100px; height: 100px; background: #eee; display: flex; flex-direction: column; }.vrs22 { width: 100%; height: 100%; background: green; border: none; padding: 0; } time { display: block; height: 50%; font-size: 24px; display: flex; flex-direction: column; justify-content: center; }.smallHolder { width: 100%; height: 50%; display: flex; }.smallHolder>div { width: 25%; height: 100%; flex-shrink: 0; flex-grow: 1; }.small1 { background: #fb0; }.small2 { background: #bf0; }

 <div class="date-grid"> <button class="vrs22"> <time>3</time> <div class="smallHolder"> <div class="small1"></div> <div class="small2"></div> </div> </button> </div>