Блог

В настоящее время я пытаюсь создать базовый веб-сайт, используя HTML, CSS и Javascript. Однако есть определенная часть этого веб-сайта, с созданием которой у меня возникают трудности. Вот как должен выглядеть раздел, причем часть слева — это та часть, которая больше всего сбивает меня с толку. Это раздел, который должен содержать четыре основных квадрата рядом друг с другом; Изображение 1 (ссылка ранее) обеспечивает визуальное представление.

Вот изображение того, что мне удалось получить в настоящее время: все четыре квадрата присутствуют, но вместо этого они наложены друг на друга. я не смог приблизиться к нему.

Вот html-код, стоящий за этим:

    <div class="top-large-left">
                        <h3 id="hot">Interaction</h3>                     
                    </div>                   
                    <div class="small-top-right">
                        <h3 id="item">Location</h3>
                    </div>
                    <div class="large-left-section">
                        <div>
                            <section class="left-section">
                                <div class="btn-group button">
                                    <div class="button1">
                                <button type="button1">Display X, Y</button>
                                </div>
                                <div class="button2">
                                <button type="button2">Theme</button>
                                </div>
                                <div class="button3">
                                <button type="button3">Modal</button>
                                </div>
                                <div class="button4">
                                <button type="button4">Swap Image</button>
                            </div>
                                

                            </section>
                        </div>
 

А также CSS:

  .btn-group button {
    background-color: #428bca;
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    color: white;
    padding: 32px 19px;
    cursor: pointer;
    display: inline-block;
    margin: 2px 2px;
    border: 1px;
    text-align: center;
    line-height: 25px;
  }
  .button1 {
    width: 130px;
  }  
  .button2 {
    width: 130px;
    
  }
  .button3 {
    width: 130px;
  }
  .button4 {
    width: 130px;
  }
 

Как я смогу добиться того, что показано на первом изображении? Мне нужно использовать функцию css-grid или что-то еще?Не стесняйтесь говорить, если мне нужно предоставить дополнительную информацию, спасибо.

Flex — это ваше решение здесь. Flex упрощает вашу жизнь.

Запустите фрагмент на полное окно. (Полная страница)

  .top-large-left {
    background-color: #428bca;
    padding: 0 1rem;
 }
  .top-large-left h3 {
    margin:0;
  }
 .wrapper {
   display:flex;
   flex-direction:row;
 }
 .large-left-section,
 .large-right-section{
    flex: 1 1 50%;
    border: 10px solid lightgrey;
    text-align: center;
    margin:5px; 
}
 .btn-group button {
    background-color: #428bca;
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    color: white;
    padding: 32px 19px;
    cursor: pointer;
    display: inline-block;
    margin: 2px 2px;
    border: 1px;
    text-align: center;
    line-height: 25px;
  }
.large-left-section .left-section .btn-group.button{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.large-left-section .left-section .btn-group.button .btn {
    flex: 0 0 45%;
    margin:5px;
}
.large-left-section .left-section .btn-group.button .btn button {
  width:100%;
} 

 <div class="top-large-left">
  <h3 id="hot">Interaction</h3>                     
</div> 
<div class="wrapper">
  <div class="large-left-section">
    <section class="left-section">
        <div class="btn-group button">
           <div class="btn button1">
            <button type="button1">Display X, Y</button>
          </div>
          <div class="btn button2">
            <button type="button2">Theme</button>
          </div>
          <div class="btn button3">
            <button type="button3">Modal</button>
          </div>
          <div class="btn button4">
            <button type="button4">Swap Image</button>
          </div>
        </div>
    </section>
  </div>
  <div class="large-right-section">

  </div>
</div>