时间戳

首页 > 解决方案 > 如何使这些图像保持在“网格”中？

html - 如何使这些图像保持在“网格”中？

问题描述

所以我有一些图片下面有文字，我希望它们的大小相同。这行得通，但我也希望它们处于一种“光栅”中，而不是可见的。但所以他们在 1 行。我什至不知道 CSS 是否正确。如果一旦有人捐赠，他们的形象和名字就会直接出现在网站上，这也很酷，这可能很难。这样图像对齐对我来说就足够了。

CSS

.col-md_staffblock{
    margin: 30px auto;
    margin-bottom: 5px auto;
    padding: 10px 10px; 
}

HTML

<h1 >DONATORS</h1>
        <p>Donations help us keep our servers online 24/7.</p>
        <div class="row stafflist">

            <div class="col-md_staffblock">
                <img width="100px;" src="img/JOSH_KING222.png">
                <h2>JOSH_KING222</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/BuddySven.png">
                <h2>BuddySven</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/AllexX.png">
                <h2>AllexX</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/fond99.png">
                <h2>fond99</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/II_Sebs.png">
                <h2>II_Sebs</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/obesemessFTW69.png">
                <h2>obesemessFTW69</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/DcemilO.png">
                <h2>DcemilO</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="img/sonicboom62798.png">
                <h2>sonicboom62798</h2>
                <p>Donator</p>
            </div>
        </div>

这个 html 对于每张图片都是一样的。

标签： htmlcss

解决方案

据我了解您的问题，我的解决方案是这样的：-

HTML我更改了您的图像，以便我可以预览您可以根据需要使用默认图像

<h1 >DONATORS</h1>
        <p>Donations help us keep our servers online 24/7.</p>
        <div class="row stafflist">

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>JOSH_KING222</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>BuddySven</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>AllexX</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>fond99</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>II_Sebs</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>obesemessFTW69</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>DcemilO</h2>
                <p>Donator</p>
            </div>

            <div class="col-md_staffblock">
                <img width="100px;" src="https://picsum.photos/seed/picsum/100">
                <h2>sonicboom62798</h2>
                <p>Donator</p>
            </div>
        </div>

普通的CSS

.stafflist {
  display: flex;
}

.col-md_staffblock  {
  margin: 10px
}

h2 {
  font-size: 12px
}

使用CSS3 grids只需将数字 8 更改为您想要的任何数字，您将在 X 列中获得一个网格

.stafflist {
  display: grid;
  grid-template-columns: repeat(8, 1fr) ;

}

希望这可以帮助

推荐阅读