如何在一個div中水平對齊多個div，間距相等-有解無憂

我知道關于這個主題有很多問題，但我似乎可以找到一種方法來解決它。我是新手css，我正在嘗試在盒子方法中重新創建簡單的盒子。

這是我的Codepen的鏈接

這里是.html提供進一步的背景..

<html>

<head>
    <link rel="stylesheet" href="index.css">
    </script>
</head>

<body class="body">
<!-- Navbar -->
        <nav class="navbar">
            <h1>Hello World</h1>
        </nav>
<!-- Header Boxes -->
        <div class="header-box">
            <div class="child-box-1">
                <div class="child-box-2">
                    <div class="child-box-3">
                    </div>
                </div>
            </div>
        </div>
</body>
</html>

基本上，class = 'header-box'需要容納child-box-1, child-box-2, child-box-3, 所以在主要的藍色盒子里基本上會有一個紅色、黃色和黑色的盒子..

uj5u.com熱心網友回復：

    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat&display=swap');
    
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    .body {
        padding: 0;
        margin: 0;
        background-color:rgb(57, 67, 77);
    }
    
    .navbar {
        padding: 20;
        margin: 0;
        max-width: 100%;
        background-color:rgb(57, 67, 77);
        display: flex;
        justify-content: center;
    }
    
    h1 {
        padding-top: 10;
        margin: 0;
        font-family:'Montserrat';
        color: whitesmoke;
        font-size: xx-large;
    }
    
    .header-box {
        padding:0;
        margin: 10;
        max-width: 100%;
        height:200px;
        background-color: blue;
        display: flex;
        text-align: center;
    }
    
    .child-box-1 {
        padding: 0;
        margin: 10;
        background: red;
        width: 32%;
        height: 40px;
        margin: 1%;
    }
    
    .child-box-2 {
        padding: 0;
        margin: 10;
        background: yellow;
        width: 32%;
        height: 40px;
        margin: 1%;
    }
    
    .child-box-3 {
        padding: 0;
        margin: 10;
        background: black;
        width: 32%;
        height: 40px;
        margin: 1%;
      
    }

    <html>
    
    <head>
        <link rel="stylesheet" href="index.css">
        </script>
    </head>
    
    <body class="body">
    <!-- Navbar -->
            <nav class="navbar">
                <h1>Hello World</h1>
            </nav>
    <!-- Header Boxes -->
            <div class="header-box">
                <div class="child-box-1"></div>
              <div class="child-box-2"></div>
              <div class="child-box-3"></div>
            </div>
    </body>
    </html>

uj5u.com熱心網友回復：

.header-box {
    margin: 0 auto;

    width: 300px;
    height: 100px;
    background: lightblue;

    padding: 10px 20px;

    display: flex;
    justify-content: space-between;
}

.header-box > div {
    width: 50px;
    aspect-ratio: 1;
    background: red;
}

<div class="header-box">
  <div class="child-box-1"></div>
  <div class="child-box-2"></div>
  <div class="child-box-3"></div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436791.html

標籤：html css

上一篇：制作一個帶有自定義圖示的按鈕

下一篇：使一組元素水平向左移動