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

Question

Делал всё это через костыли

За flexbox ничего не знаю, статьи на моём примере ничему не учат, но уверен, что всё это можно расположить также в тысячу раз проще.

Код:

<div class="blocks">
        <div class="blck buttons">
                <div class="buttons-1">
                    <h1 class="title">Buttons</h1>
                    <a href="#" class="btn-1">Button 1</a>
                </div>
                <div class="buttons-2">
                    <a href="#" class="btn-2">Button 2</a>
                </div>
        </div>
        <div class="blck slider_block">
            <h1 class="title">Slider</h1>
                <div class="sl">
                    <input type="range" min="1" max="100" value="50" class="slider">
                </div>
        </div>
        <div class="blck textbox_block">
            <h1 class="title">Textbox</h1>
                <div class="tb">
                    <input type="text" size="40" class="textbox">
                </div>
        </div>
    </div>

.buttons-1 {
    position: absolute;
    width: 300px;
    height: 150px;
    background: rgba(50, 50, 50, 0.73);
    border: 0.7px solid rgba(255, 255, 255, 0.09);
    box-sizing: border-box;
    backdrop-filter: blur(22px);
    border-radius: 7px 7px 0px 0px;
    padding: 23px;
    top: 393px;
    left: 42%;
    align-items: center;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.buttons-2 {
    position: absolute;
    width: 300px;
    height: 50px;
    padding: 5px;
    top: 485px;
    left: 42%;
    box-sizing: border-box;
    border-radius: 7px;
    background: rgba(62, 72, 156, 0.21);
    border: 0.4px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(18px);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.52);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.btn-1 {
    position: absolute;
    top: 50%;
    background: rgba(115, 113, 139, 0.089);
    border: 0.4px solid rgba(243, 243, 243, 0.07);
    box-sizing: border-box;
    border-radius: 7px;
    font-family: Segoe UI;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 24px;
    color: #F2F2F2;
    padding: 10px 97px;
    transition: 0.2s;
}

.btn-2 {
    position: absolute;
    top: 20%;
    border-radius: 5px;
    font-family: Segoe UI;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 24px;
    color: #F2F2F2;
    padding: 5px 13px;
    width: 289px;
    transition: 0.3s;
}

.slider_block {
    position: absolute;
    width: 300px;
    height: 120px;
    background: rgba(50, 50, 50, 0.73);
    border: 0.7px solid rgba(255, 255, 255, 0.09);
    box-sizing: border-box;
    backdrop-filter: blur(22px);
    border-radius: 7px 7px 7px 7px;
    padding: 23px;
    top: 610px;
    left: 42%;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.52);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.sl {
    padding-top: 25px;
}

.textbox_block {
    position: absolute;
    width: 300px;
    height: 120px;
    background: rgba(50, 50, 50, 0.73);
    border: 0.7px solid rgba(255, 255, 255, 0.09);
    box-sizing: border-box;
    backdrop-filter: blur(22px);
    border-radius: 7px 7px 7px 7px;
    padding: 23px;
    top: 378px;
    left: calc(50% - 0px/2 + 210px);
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.52);
    transform: translate(-50%, -50%);
    z-index: 2;
}

Answer 1

Проще конечно на grid - смотрите сами

html,
body {
  margin: 0;
  padding: 0;
}

.items {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.5fr 0.5fr;
  grid-gap: 5vw;
  box-sizing: border-box;
  padding: 5vh 10vw;
  background-size: cover;
  background: url(https://mir-s3-cdn-cf.behance.net/project_modules/1400/0868a088493051.5dd7a41b79d6f.jpg);
}

.outer1,
.outer2,
.outer3 {
  background-color: darkblue;
  border-radius: 6px;
  color: #fff;
  box-sizing: border-box;
  padding: 20px;
}

.outer1 {
  height: 90%;
}

.outer2,
.outer3 {
  height: 60%;
}

<div class="items">
  <div class="item">
    <div class="outer1">1</div>
  </div>
  <div class="item">
    <div class="outer2">2</div>
  </div>
  <div class="item">
    <div class="outer3">3</div>
  </div>
</div>

Answer 2

Надо для дивов прописать display: flex; и flex-direction: row;, и задать падинги или высоту и длину. И дивы смогут располагаться на одной линии.

БЛОГ НА HUSL

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

Ответы (2 шт):