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

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>

        <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) ;

}

希望这可以帮助

Answer 2

您可以为您的类 .stafflist 使用 css 网格，如下所示，您正在修复您的 div 以显示分布在页面上的 8 列

.stafflist {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;

}