正方形内的正方形与 CSS答案

【问题标题】：Squares inside the square with CSS正方形内的正方形与 CSS
【发布时间】：2020-06-17 19:42:24
【问题描述】：

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

.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 个小方块，结果应该是这样的：

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

【问题讨论】：

hmm - 最后一张图片中的小矩形不是正方形。它们应该是正方形吗（它们会占据大正方形的一半空间）？

标签： html css flexbox css-selectors

【解决方案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>

【讨论】：