如何使用 HTML 和 CSS 与容器排列图像？

小能豆

如何使用 HTML 和 CSS 与容器排列图像？

javascript

我在使用容器排列图像时遇到问题。我的图像有点太分散，我希望它们彼此靠近一点。由于之前帖子中提出的建议，我决定动态缩小图像并将它们放入容器中，但现在我不确定如何将图像设置为我想要的位置。

我尝试过调整宽度和方向，但仍然无法获得我想要的格式。这是我的代码。任何其他建议（例如格式化或开发）将不胜感激，因为我对学习 HTML 和 CSS 还很陌生。

<!DOCTYPE html>

<html>

<meta charset="UTF-8">
<!--helps minimizes the screen and keeps the content within the webpage-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recreation of Angel's Store </title>
<link rel="stylesheet" href="style.css">



</head>

<!--This is the product header-->
<body>

    <!--this is the first box that contains the header and the header-menu-->
    <header>
        <div class="wrapper"> 
            <nav class="header-nav" role="navigation" aria-label="Main">
                <ul>
                    <li class="choice">
                        <a href="/">PRODUCTS</a>
                    </li>
                    <li>
                        <a href="/">CONTACT</a>
                    </li>
                    <li>
                        <a href="/">CART</a>
                    </li>
                </ul>
            </nav>
            <div class="branding">
                <a href="/" title="Home">
                    <div class="store-header">hanahaki02</div>

                </a>
            </div>
        </div>
        <nav class ="header-nav mobile-nav" aria-label="Mobile Main" role="navigation">
            <ul>
                <li class="choice">
                    <a href="/">Products</a>
                </li>
                <li>
                    <a href="/">Contact</a>
                </li>
                <li>
                    <a href="/cart">
                        Cart (<span class="cart-num-items">0</span>)
                    </a>
                </li>
            </ul>    
        </nav>
    </header>
<!--This is the script for the cart that allows it to add an item-->
    <script>
        var cartItemCount = 0;
        document.querySelector('.cart-num-items').textContent = cartItemCount;
    </script>


    <!--This is the main or the focus of the website-->

    <main class="main" id="main">


        <!--Product Menu-->

        <div class="product-menu">
            <div class="wrapper">
                <div class="product-menu-nav">
                    <div class="list-title">Products</div>
                        <nav class="product-navigation" role="navigation" aria-label="Main">
                            <ul>
                                <li class="choice">
                                    <a href="/">All</a>
                                </li>
                                <li>
                                    <a href="/">Prints</a>
                                </li>
                                <li>
                                    <a href="/">Keychains</a>
                                </li>
                                <li>
                                    <a href="/">Stickers</a>
                                </li>
                            </ul> 
                        </nav>
                    </div>
                </div>
        </div>


        <!--stack overflow help with list containers -->

        <div class="item-list">
            <div class="img-container">
            <a href="http://127.0.0.1:5500/keychain.html" class="href">
                <img id="keychain1" src="Images/8.webp" alt="keychain1" title="keychain1">
                <section>
                    <p>Chainsaw Man Acrylic Keychain</p>
                    <hr>
                    <p>$10.00</p>

                </section>
            </a>  
            </div>
            <div class="img-container">
            <a href="http://127.0.0.1:5500/keychain2.html" class="href"> 
                <img id="keychain2" src="Images/7.webp" alt="keychain2" title="keychain2">
                <section>
                    <p>Animal Acrylic Keychain</p>
                    <hr>
                    <p>$10.00</p>

                </section>


            </a>
        </div>
        <div class ="img-container">
            <a href="http://127.0.0.1:5500/stickers.html" class="href">
                <img id="stickers" src="Images/9.webp" alt="stickers" title="stickers">
                <section>
                    <p>Stickers</p>
                    <hr>
                    <p>$2.00-$6.00</p> 

                </section>


            </a>
        </div>
        <div class ="img-container">
            <a href="http://127.0.0.1:5500/photocard1.html" class="href">
                <img id="Photocard1" src="Images/10.webp" alt="photocard1" title="photocard1">
                <section>
                    <p>Photocard Print (Ver 1 Designs)</p>
                    <hr>
                    <p>$3.75</p>

                </section>       
            </a>
        </div>
        <div class ="img-container">
            <a href="http://127.0.0.1:5500/photocard2.html" class="href">
                <img id="Photocard2" src="Images/11.webp" alt="photocard2" title="photocard2">
                <section>
                    <p>Photocard Print (Ver 3 Designs)</p>
                    <hr>
                    <p>$3.75-$12</p>

                </section> 
            </a>
        </div>
        </div>

    </main>


    <!--footer-menu of the website-->

    <footer>
        <div class="wrapper"> 
            <nav class="footer-nav" role="navigation" aria-label="Main">
                <ul>
                    <li class="choice">
                        <a href="/">Home</a>
                    </li>
                    <li>
                        <a href="/">Products</a>
                    </li>
                    <li>
                        <a href="/">Contact</a>
                    </li>
                    <li>
                        <a href="/">Cart</a>
                    </li>
                </ul>
            </nav>
        </div>

    </footer>


</body>



</html>
* {
    box-sizing: border-box;


}



header {
    text-align: center;
}

.main {
    flex:1;
    padding-bottom: 60px;
}

figcaption, figure, main {
    display:block;
}


.wrapper {
    padding: 0 24px;
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
}

.header-nav {
    font-family: "Varela Round", sans-serif;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul {
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.header-nav ul li {
    border-bottom: 1px solid #111111;
    padding: 8px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.branding {
    font-size: 20px;
    margin: 76px auto;
    text-transform: uppercase;
}

.branding > a {
    display: inline-block;
}

a[href] {
    cursor: pointer;
}

a {
    transition: color 0.1s linear;
    color: #111111;
    text-decoration: none;
}

a {
    background-color: transparent;
}


.header-nav.mobile-nav {
    display: none;
}



.store-header {
    color: rgb(17, 17, 17);
    font-family:"Varela Round", sans-serif;
    font-size: 42px;
    letter-spacing: 4px;
    line-height: 42px;

}

.product-menu {
    text-align: center;
    font-size: 16px;
    line-height: 1;
}


/*stack overflow help*/

.item-list{       /*parent container styles*/

    width: 100%;
    display: flex;          /* allows flex properties */
    flex-direction: row;     /* keeps elements in a row */
    flex-wrap: wrap;        /* wraps elements when they reach the edge of the screen */
  }

.img-container {        /*img container styles*/

    max-width: 33.33%;
    width: 33.33%;
    display: grid;
    display: flex;
    align-items: center;
    justify-content: center;
  }

img {            /* img styles */
    width: 100%


  }


nav {
    height: 80px;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-size: 16px;


}

body {
    background: #FBEFEF;
}

nav a {
    text-decoration: none;
    color: #555555;
    font-size: 15px;
    padding:0 10px;
    font-family: "Varela Round", sans-serif;
    letter-spacing: 0.5px;



} 

.product-menu-nav {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #111111;
    border-top: 1px solid #111111;
    font-size: 16px;
    margin-bottom: 40px;
    padding: 24px 16px;

}


.product-menu-nav .list-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}


.product-menu-nav nav {
    text-align: center;
    max-width: 100%;
}



.product-menu-nav ul {
    display: flex;
    flex-wrap: wrap;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    justify-content: center;

}

.product-menu-nav ul li {
    margin: 4px 0;

}


.product-menu-nav ul li:not(:last-child):after {
    content: "/";
    opacity: 0.5;
}

.footer-nav {
    font-family: "Varela Round", sans-serif;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.footer-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav ul li {
    padding: 8px;
}

阅读 118

2023-08-03

共1个答案

小能豆

为了使图像靠得更近，您可以通过调整边距或填充属性在图像容器之间添加一些间距。在您的情况下，您可以修改“.img-container”类来添加一些边距或填充，以在图像之间创建所需的间距。

例如，您可以尝试向 .img-container 类添加一些边距，如下所示：

cssCopy code.img-container {
  max-width: 33.33%;
  width: 33.33%;
  display: grid;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px; /* Add some margin here to create spacing between images */
}

通过添加 10 像素的边距，您应该会看到图像之间有一些间距，并且您可以根据自己的喜好调整该值。

此外，如果您想更有效地将图像在容器内居中，您可以删除 display: grid; 属性，因为它会被当前 CSS 代码中的 display: flex; 覆盖。

通过这些更改，您的图像应该更加紧密地结合在一起，并且在其容器内更好地对齐。请随意调整边距值以获得所需的间距。

2023-08-03