Как сделать чтобы квадрат не выходил наружу?

#html #css #html5 #css3

.box {
  width: 160px;
  height: 160px;
  border: 1px solid black;
}

.big {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: red;
}

.small {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: #000;
}

  

  

  

  

  

  





    

Ответы

Ответ 1

Можно добавить обтекание float: left для большого квадрата



.box {
  width: 160px;
  height: 160px;
  border: 1px solid black;
}

.big {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: red;
  float: left;
  margin:  0 4px;
}

.small {
  width: 50px;
  height: 50px;
  display: inline-block;
  background: #000;
}












UPD: Можно добавить еще margin для ровных отступов.


Ответ 2

Можно для такого рода разметки использовать CSS Grid layout:



.box {
  border: 1px solid black;
  /* задаём grid-контейнер, который не будет растягиваться на всю ширину строки */
  display: inline-grid;
  /* задаём 3 столбца по 50px */
  grid-template-columns: repeat(3, 50px);
  /* задаём 3 строки по 50px */
  grid-template-rows: repeat(3, 50px);
  /* задаём отступы между строками и стобцами в 5px */
  grid-gap: 5px;
}

.big {
  background: red;
  /* данный элемент будет растягиваться на 2 стобца */
  grid-column: span 2;
  /* данный элемент будет растягиваться на 2 строки */
  grid-row: span 2;
}

.small {
  background: #000;
}

  

  

  

  

  

  






Чтобы данная разметка работала в IE10+ следует использовать старый синтаксис. Это
значит, что надо задавать положение каждой клетки вручную (иначе элементы наложатся
друг на дружку в первой клетке) и эмулировать отступы между клетками дополнительными
строками и столбцами (так как IE не поддерживает grid-gap), также в IE не работает
функция repeat. Для демонстрации я использовал подобные свойства в старой и новой спецификациях
CSS Grid Layout для разных браузеров, чтобы было легче сопровождать код. Не задавал
значения -ms-grid-row: 1 и -ms-grid-column: 1, так как это значения по умолчанию. Демонстрация:



.box {
  border: 1px solid black;
  display: -ms-inline-grid;
  display: inline-grid;
  -ms-grid-columns: 50px 5px 50px 5px 50px;
  grid-template-columns: 50px 5px 50px 5px 50px;
  -ms-grid-rows: 50px 5px 50px 5px 50px;
  grid-template-rows: 50px 5px 50px 5px 50px;
}

.big {
  background: red;
  -ms-grid-column-span: 3;
  grid-column: 1 / span 3;
  -ms-grid-row: 3;
  -ms-grid-row-span: 3;
  grid-row: 3 / span 3;
}

.small {
  background: #000;
}

.small:nth-child(2) {
  -ms-grid-column: 3;
  grid-column: 3;
}

.small:nth-child(3) {
  -ms-grid-column: 5;
  grid-column: 5;
}

.small:nth-child(5) {
  -ms-grid-column: 5;
  grid-column: 5;
  -ms-grid-row: 3;
  grid-row: 3;
}

.small:nth-child(6) {
  -ms-grid-column: 5;
  grid-column: 5;
  -ms-grid-row: 5;
  grid-row: 5;
}