Квадраты внутри квадрата с CSS - PullRequest
Новая
       9

Квадраты внутри квадрата с CSS

0 голосов
/ 17 июня 2020

Я пытаюсь иметь 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>

Я пытаюсь достичь следующего:

enter image description here

Идея чтобы иметь эту гибкость, поэтому, если у меня есть 2 маленьких квадрата, результаты должны быть такими:

enter image description here

Может ли кто-нибудь помочь мне с этим?

Ответы [ 2 ]

1 голос
/ 17 июня 2020

Это могло быть решением. Он использует ваш неизмененный 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>
0 голосов
/ 17 июня 2020

Я предлагаю попробовать использовать: .date-grid{display:flex;flex-direction:column}, который будет обертывать все эти элементы. Затем в одном большом квадрате будет width:100%;height:80%; или что-то в этом роде, наконец, маленькие .smallHolder{display:flex;flex-direction:row;width:100%;height:19%;}, затем для фактического мелкие элементы width:19%; воздержитесь от использования кнопки, чтобы обернуть это вокруг. Может быть:

...