为什么显示网格中的 div 框不能缩小以适应父容器？

问题描述 投票：0回答：1

我有一个带有 div class="insights" 的主标签，该标签又包含三个 div。使用显示网格，我想实现这三个 div 水平相邻的布局。

令人惊讶的是，当我编写如下所示的 CSS 规则时，它无法提供我想要的布局。相反，最后一个 div 出现在第二个 div 的下方，并且表现得就像最后两个 div 是“一”。

请注意：第一张照片展示了我当前的位置，第二张照片是最终所需的布局。

对此有什么帮助吗？谢谢。

<body>
<div class="container">
    <aside>
        <div class="top">
            <div class="logo">
                <img src="images/logo.png" alt="logo">
                <h2>EGA<span class="danger">TOR</span></h2>
            </div>
            <div class="close" id="close-btn">
                <span class="material-icons-sharp">close</span>
            </div>
        </div>

        <div class="sidebar">
            <a href="#">
                <span class="material-icons-sharp">grid_view</span>
                <h3>Dashboard</h3>                  
            </a>
            <a href="#" class="active">
                <span class="material-icons-sharp">person_outline</span>
                <h3>Customers</h3>                  
            </a>
            <a href="#">
                <span class="material-icons-sharp">receipt_long</span>
                <h3>Orders</h3>                  
            </a>
            <a href="#">
                <span class="material-icons-sharp">insights</span>
                <h3>Analytics</h3>                  
            </a>
            <a href="#">
                <span class="material-icons-sharp">mail_outline</span>
                <h3>Messages</h3>
                <span class="message-count">26</span>                  
            </a>
            <a href="#">
                <span class="material-icons-sharp">inventory</span>
                <h3>Products</h3>                  
            </a>
            <a href="#">
                <span class="material-icons-sharp">report_gmailerrorred</span>
                <h3>Reports</h3>                  
            </a>
            <a href="#">
                <span class="material-icons-sharp">settings</span>
                <h3>Settings</h3>                  
            </a>
            <a href="#">
                <span class="material-icons-sharp">add</span>
                <h3>Add Product</h3>                  
            </a>
            <a href="#">
                <span class="material-icons-sharp">logout</span>
                <h3>Log Out</h3>                  
            </a>
        </div>
    </aside>
    <!-- ------------------ END OF ASIDE ------------------- -->
    <main>
        <h1>Dashboard</h1>
        <div class="date">
            <input type="date">
        </div>
        <div class="insights">
            <div class="sales">
                <span class="material-icons-sharp">analytics</span>
                <div class="middle">
                    <div class="left">
                        <h3>Total Sales</h3>
                        <h1>$25,024</h1>
                    </div>
                    <div class="progress">
                        <svg>
                            <circle cx='38' cy='38' r='36'></circle>
                        </svg>
                        <div class="number">
                            <p>81%</p>
                        </div>          
                    </div>
                </div>
                <small class="text-muted">Last 24 Hours</small>
            </div>
            <!-- ------------END OF SLAES ------------>
            <div class="expenses">
                <span class="material-icons-sharp">bar_chart</span>
                <div class="middle">
                    <div class="left">
                        <h3>Total Sales</h3>
                        <h1>$25,024</h1>
                    </div>
                    <div class="progress">
                        <svg>
                            <circle cx='38' cy='38' r='36'></circle>
                        </svg>
                        <div class="number">
                        <p>62%</p>
                    </div>          
                </div>
                <small class="text-muted">Last 24 Hours</small>
            </div>
            <!-- ------------END OF EXPENSES ------------>
            <div class="income">
                <span class="material-icons-sharp">stacked_line_chart</span>
                <div class="middle">
                    <div class="left">
                        <h3>Total Sales</h3>
                        <h1>$25,024</h1>
                    </div>
                    <div class="progress">
                        <svg>
                            <circle cx='38' cy='38' r='36'></circle>
                        </svg>
                        <div class="number">
                            <p>44%</p>
                        </div>          
                    </div>
                </div>
                <small class="text-muted">Last 24 Hours</small>
            </div>
            <!-- ------------END OF INCOME  ------------>
        </div>
    </main>
</div>   
</body>

CSS：

@import url('https://fonts.googleapis.com/css2?  family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
--color-primary: #7380ec;
--color-danger: #ff7782;
--color-success: #41f1b6;
--color-warning: #ffbb55;
--color-white: #fff;
--color-info-dark: #7d8da1;
--color-info-light: #dce1eb;
--color-dark: #363949;
--color-light: rgba(132, 139, 200, 0.18);
--color-primary-variant: #111e88;
--color-dark-variant: #677483;
--color-background: #f6f6f9;

--card-border-radius: 2rem;
--border-radius-1: 0.4rem;
--border-radius-2: 0.8rem;
--border-radius-3: 1.2rem;

--card-padding: 1.8rem;
--padding-1: 1.2rem;

--box-shadow: 0 2rem 3rem var(--color-light);
   }

* {
margin: 0;
padding: 0;
outline: 0;
appearance: none;
border: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}

html {
font-size: 14px;
 }

body {
width: 100vw;
height: 100vh;
font-family: poppins, sans-serif;
font-size: 0.88rem;
background: var(--color-background);
user-select: none;
overflow-x: hidden;
color: var(--color-dark);
 }

   .container {
   display: grid;
   width: 96%;
   margin: 0 auto;
   gap: 1.8rem;
   grid-template-columns: 14rem auto 23rem;
          }

 a {
color: var(--color-dark);
}

img {
display: block;
width: 100%;
 }

h1 {
font-weight: 800;
font-size: 1.8rem;
 }

h2 {
font-size: 1.4rem;
 }

h3 {
font-size: 0.87rem;
  }

h4 {
font-size: 0.8rem;
 }

h5 {
font-size: 0.77;
 }

small {
font-size: 0.75rem;
  }

.profile-photo {
 width: 2.8rem;
 height: 2.8rem;
 border-radius: 50%;
 overflow: hidden;
   }

.text-muted {
color: var(--color-info-dark);
  }

p {
color: var(--color-dark-variant);
  }

 b {
  color: var(--color-dark);
  }

.primary {
 color: var(--color-primary);
  }

.danger {
 color: var(--color-danger);
   }

.success {
 color: var(--color-success);
  }

 .warning {
   color: var(--color-warning);
      }

 aside {
  height: 100vh;
  }

aside .top {
 background: white;
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-top: 1.4rem;
   }

aside .logo {
 display: flex;
 gap: 0.8rem;
   }

aside .logo img {
  width: 2rem;
  height: 2rem;
  }

aside .close {
 display: none;
  }

  /*======== SIDEBAR ====== */

aside .sidebar {
 display: flex;
 flex-direction: column;
 height: 86vh;
 position: relative;
 top: 3rem;
     }

aside h3 {
 font-weight: 500;
    }

aside .sidebar a {
 display: flex;
 color: var(--color-info-dark);
 margin-left: 2rem;
 gap: 1rem;
 align-items: center;
 height: 3.7rem;
 position: relative;
 transition: all 300ms ease;
       }

aside .sidebar a span {
 font-size: 1.6rem;
 transition: all 300ms ease;
     }

aside .sidebar a:last-child {
 position: absolute;
 bottom: 2rem;
 width: 100%;
     }

aside .sidebar a.active {
 background: var(--color-light);
 color: var(--color-primary);
 margin-left: 0;
     }

aside .sidebar a.active::before {
 content: '';
 width: 6px;
 height: 100%;
 background: var(--color-primary);
    }

aside .sidebar a.active span {
 color: var(--color-primary);
 margin-left: calc(1rem - 3px);
    }

aside .sidebar a:hover {
 color: var(--color-primary);  
    }

 aside .sidebar a:hover span {
  margin-left: 1rem;
     }

aside .sidebar a .message-count {
 background-color: var(--color-danger);
 color: var(--color-white);
 padding: 2px 10px;
 font-size: 11px;
 border-radius: var(--border-radius-1);
        }

      /* ========== MAIN ======== */

main {
 margin-top: 1.4rem;
 border: 1px solid black;
     }

main .date {
 display: inline-block;
 background: var(--color-light);
 border-radius: var(--border-radius-1);
 margin-top: 1rem;
 padding: 0.5rem 1.6rem;
          }

main .date input[type='date'] {
 background: transparent;
 color: var(--color-dark);
          }

main .insights {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.6rem;   
           }
html css grid
1个回答
0
投票

你忘了关闭“expenses”中“number”类的标签div，无论如何，我是编程新手，我可以私信你一下吗？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.