亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我怎樣才能讓這些圖像保持在“網格”中?

我怎樣才能讓這些圖像保持在“網格”中?

哈士奇WWW 2023-09-11 17:02:42
所以我有一些下面有文字的圖像,我希望它們的大小相同。這很有效,但我也希望它們處于某種“光柵”狀態,而不是可見狀態。但他們在 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 對于每個圖像都是相同的。
查看完整描述

2 回答

?
嗶嗶one

TA貢獻1854條經驗 獲得超8個贊

據我了解你的問題,我的解決方案是這樣的:-


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


}


希望這可以幫助


查看完整回答
反對 回復 2023-09-11
?
30秒到達戰場

TA貢獻1828條經驗 獲得超6個贊

您可以為您的類 .stafflist 使用 css 網格,如下所示,您正在修復您的 div 以顯示分布在頁面上的 8 列


.stafflist {

? display: grid;

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


}

查看完整回答
反對 回復 2023-09-11
  • 2 回答
  • 0 關注
  • 135 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號