我怎样才能让这些图像保持在“网格”中？

Question

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

CSS

.col-md_staffblock{

    margin: 30px auto;

    margin-bottom: 5px auto;

    padding: 10px 10px; 

}

超文本标记语言

<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 对于每个图像都是相同的。

Answer 1

据我了解你的问题，我的解决方案是这样的：-HTML我更改了您的图像，以便可以进行预览，如果您愿意，您可以使用默认图像<h1 >DONATORS</h1>&nbsp; &nbsp; &nbsp; &nbsp; <p>Donations help us keep our servers online 24/7.</p>&nbsp; &nbsp; &nbsp; &nbsp; <div class="row stafflist">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md_staffblock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100px;" src="https://picsum.photos/seed/picsum/100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>JOSH_KING222</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Donator</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md_staffblock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100px;" src="https://picsum.photos/seed/picsum/100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>BuddySven</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Donator</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md_staffblock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100px;" src="https://picsum.photos/seed/picsum/100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>AllexX</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Donator</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md_staffblock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100px;" src="https://picsum.photos/seed/picsum/100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>fond99</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Donator</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md_staffblock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100px;" src="https://picsum.photos/seed/picsum/100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>II_Sebs</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Donator</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md_staffblock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100px;" src="https://picsum.photos/seed/picsum/100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>obesemessFTW69</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Donator</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md_staffblock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100px;" src="https://picsum.photos/seed/picsum/100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>DcemilO</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Donator</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md_staffblock">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="100px;" src="https://picsum.photos/seed/picsum/100">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>sonicboom62798</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Donator</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>普通的CSS.stafflist {&nbsp; display: flex;}.col-md_staffblock&nbsp; {&nbsp; margin: 10px}h2 {&nbsp; font-size: 12px}使用CSS3 grids只需将数字 8 更改为您想要的任何数字，您就会得到 X 列的网格.stafflist {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(8, 1fr) ;}希望这可以帮助

Answer 2

您可以为您的类 .stafflist 使用 css 网格，如下所示，您正在修复您的 div 以显示分布在页面上的 8 列.stafflist {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;}