如何使我的網站的特定部分看起來像這樣？ （使用 HTML 和 CSS。）

Question

我目前正在嘗試使用 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 function 還是其他什么？ 如果我需要提供更多信息，請隨時說，謝謝。

Answer 1

Flex 是您的解決方案。 Flex 讓您的生活更輕松。

在完整的 window 上運行代碼片段。 （完整頁面）

 .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>