时间戳

首页 > 解决方案 > 如何使我的网站的特定部分看起来像这样？（使用 HTML 和 CSS。）

html - 如何使我的网站的特定部分看起来像这样？（使用 HTML 和 CSS。）

问题描述

我目前正在尝试使用 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 函数还是其他什么？如果我需要提供更多信息，请随时说，谢谢。

标签： htmlcsscss-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>

推荐阅读