0

.page-50-percentage {
  background: red;
  display: inline-block;
  margin: 10px;
  vertical-align: top;
  width: calc(50% - 22px);
}
<div id="html-frame">
  <div id="1" class="page-50-percentage">id="1"
  </div>
  <div id="2" class="page-50-percentage">id="2"
  </div>
  <div id="3" class="page-50-percentage">id="3"
  </div>
</div>

1 ответ 1

1

**Вариант на гридах: **

#html-frame {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 100px 100px;
  grid-template-areas: "first third" "second third";
}

#first,
#second,
#third {
  background: pink;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second
}

#third {
  grid-area: third;
}
<div id="html-frame">
  <div id="first" class="page-50-percentage">id="first"
  </div>
  <div id="second" class="page-50-percentage">id="second"
  </div>
  <div id="third" class="page-50-percentage">id="third"
  </div>
</div>

**Вариант на флексах: **

#html-frame {
  position: relative;
  display: flex;
  flex-direction: row;
}

#first,
#second,
#third {
  flex-grow: 1;
  height: 200px;
  margin: 20px;
  background: pink;
}

#third {
  align-self: center;
}

.left {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
<div id="html-frame">
  <div class='left'>
    <div id="first" class="page-50-percentage">id="first"
    </div>
    <div id="second" class="page-50-percentage">id="second"
    </div>
  </div>
  <div id="third" class="page-50-percentage">id="third"
  </div>
</div>

**Флоаты: **

#html-frame::after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}

#first,
#second,
#third {
  height: 100px;
  width: 90%;
  margin: 20px;
  background: pink;
}

.left {
  float: left;
  width: 47%;
}

.cleafix {
  clear: both;
}

#third {
  float: right;
  width: 47%;
  height: 220px;
}
<div id="html-frame">
  <div class='left'>
    <div id="first" class="page-50-percentage">id="first"
    </div>
    <div id="second" class="page-50-percentage">id="second"
    </div>
  </div>
  <div id="third" class="page-50-percentage">id="third"
  </div>
  <div class='clearfix'></div>
</div>

3
  • он не разберётся с grid :)) 10 июл 2019 в 13:35
  • @MaximLensky, добавил флексы. Может их знает... 10 июл 2019 в 13:43
  • сразу видно разницу ..на гриде лучше 10 июл 2019 в 13:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.