Как поместить кнопку?

Question

У меня такой вопрос.. У меня есть элементы и возле этих элементов есть свободное пространство, вот мне надо как-то поместить туда эту кнопку, чтоб она лежала в этом пустом простран

Должно быть примерно вот так :

.blocks {
    display: flex;
}

.block_1 {
    width: 100px;
    height: 100px;
    background: #121212;
}

.block_2 {
    width: 100px;
    height: 100px;
    background: #121212;
    margin-left: 10px;
}

.block_3 {
    width: 100px;
    height: 100px;
    background: #121212;
    margin-left: 10px;
}

.block_4 {
    width: 100px;
    height: 100px;
    background: #121212;
    margin-left: 10px;
}


.block_5 {
    width: 100px;
    height: 100px;
    background: #121212;
    margin-top: 10px;
}

.block_6 {
    width: 100px;
    height: 100px;
    background: #121212;
    margin-top: 10px;
}

.main1 button{
    position: absolute;
    right: 0;
}

.btn {
    width: 210px;
    height: 100px;
    color: #bbb;
    margin-left: 330px;
    margin-top: -200px;
}

<main class="main">
                <div class="blocks">
                    <div class="block_1"></div>
                    <div class="block_2"></div>
                    <div class="block_3"></div>
                    <div class="block_4"></div>
                </div>
                <div class="blocks_1">
                    <div class="block_5"></div>
                </div>
                <div class="blocks_2">
                    <div class="block_6"></div>
                </div>
                <button class="btn"></button>
        </main>

стве, как это сделать? Помогите пожаулуйста

Answer 1

Можно колхозные методы использовать? Могу предложить flexbox.

.line{
  width: 430px;
  height: 100px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-top: 10px;
}

.block{
  width: 100px;
  height: 100px;
  background-color: black;
}
  
.btn{
  width: 210px;
  height: 100px;
  background-color: red;
  border: none;
}

<main class="main">
  <div class="line">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
   </div>
   <div class="line">
    <div class="block"></div>
    <button class="btn">Кнопка</button>
   </div>
   <div class="line">
    <div class="block"></div>
   </div>
</main>

Answer 2

На Grid Layout

.blocks {
  display: grid;
  grid-template-areas: 
    'b1 b2 b3 b4'
    'b5 . btn btn'
    'b6 . . .';
  grid-gap: 10px;
  width: 430px;
}

.block {
  width: 100px;
  height: 100px;
  background: #121212;
}

.btn {
  height: 100px;
  background: red;
  color: #000;
  font-size: 30px;
  font-weight: bold;
  border: 0;
  grid-area: btn;
}

.block:nth-child(1) {grid-area: b1;}
.block:nth-child(2) {grid-area: b2;}
.block:nth-child(3) {grid-area: b3;}
.block:nth-child(4) {grid-area: b4;}
.block:nth-child(5) {grid-area: b5;}
.block:nth-child(6) {grid-area: b6;}

<main class="main">
  <div class="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <button class="btn">КНОПКА</button>
  </div>
</main>

Без Grid Layout, как в старые добрые, с мамонтами там.. На float:

.blocks {
  display: block;
  width: 430px;
}

.blocks::after,
.clr {
  content: '';
  display: block;
  clear: both;
}

.block {
  display: inline-block;
  float: left;
  width: 100px;
  height: 100px;
  background: #121212;
}

.btn {
  width: 210px;
  height: 100px;
  background: red;
  color: #000;
  font-size: 30px;
  font-weight: bold;
  border: 0;
  margin-left: 110px;
}

.block:nth-child(1), .block:nth-child(2),
.block:nth-child(3), .block:nth-child(6) {
  margin-right: 10px;
}

.block:nth-child(1), .block:nth-child(2),
.block:nth-child(3), .block:nth-child(4),
.block:nth-child(6) {
  margin-bottom: 10px;
}

<main class="main">
  <div class="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="clr"></div>
    <div class="block"></div>
    <button class="btn">КНОПКА</button>
    <div class="clr"></div>
    <div class="block"></div>
  </div>
</main>

Колхозим ещё дальше - table

.blocks {
  width: 430px;
}

.block {
  display: block;
  width: 100px;
  height: 100px;
  background: #121212;
}

.btn {
  width: 210px;
  height: 100px;
  background: red;
  color: #000;
  font-size: 30px;
  font-weight: bold;
  border: 0;
}

<main class="main">
  <table class="blocks" border="0" cellpadding="5" cellspacing="0">
    <tr>
      <td><div class="block"></div></td>
      <td><div class="block"></div></td>
      <td><div class="block"></div></td>
      <td><div class="block"></div></td>
    </tr>
    <tr>
      <td colspan="2"><div class="block"></div></td>
      <td colspan="2"><button class="btn">КНОПКА</button></td>
    </tr>
    <tr>
      <td colspan="4"><div class="block"></div></td>
    </tr>
  </table>
</main>

Я бы предложил ещё вариант использовать position: absolute, но думаю хуже не надо..

БЛОГ НА HUSL

Как поместить кнопку?

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