Как сделать один блок под другим?

Question

[Александр Коновалов]

Здравствуйте! Подскажите верстку такого расположения блоков.

Answer 1

[HamSter]

Вариант 1 inline-block:

<div class="wrap">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>

.box-1 {
  width: 5rem;
  height: 10rem;
  background: #000;
}

.box-2 {
  width: 10rem;
  height: 5rem;
  border: .25rem solid #000;
  margin-left: -5px;
}

.box {
  display: inline-block;
  vertical-align: middle;
}

Вариант 2 flex:

<div class="wrap">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>


.box-1 {
  width: 5rem;
  height: 10rem;
  background: #000;
}

.box-2 {
  width: 10rem;
  height: 5rem;
  border: .25rem solid #000;
}

.wrap {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

Вариант 3 float:left:

<div class="wrap">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</div>


.box-1 {
  width: 5rem;
  height: 10rem;
  background: #000;
}

.box-2 {
  width: 10rem;
  height: 5rem;
  border: .25rem solid #000;
  margin-top: 2rem;
}

.box {
  float: left;
}

Comments

[Александр Коновалов]

HamSter спасибо!

Answer 2

[iBird Rose]

display: inline-block;
vertical-align: middle;

Comments

[Александр Коновалов]

iBird Rose а без отступа?

[iBird Rose]

обертке font-size: 0; а у блоков вернуть font-sizer: 14px к примеру

Answer 3

[DTX]

Если наплевать на 3% мамонтов, то flexbox, иначе display: inline-block;