所以我有大約 30 個影像按鈕,每個按鈕都鏈接到不同的網站......
由于它們是影像,我打算將它們排列成 3 列 * 10 行
問題是,我會經常添加/洗掉這些按鈕,因此每次重新定位它們似乎很麻煩......
我有沒有可能形成一個類似網格的結構,讓我的按鈕從左上角填充所謂的網格?
或者任何其他方法都可以,只要它們在 3 列中對齊而不必定義它們的位置。
uj5u.com熱心網友回復:
您可以使用 CSS 網格布局https://www.w3schools.com/css/css_grid.asp。
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<h1>Image grid</h1>
<div class="grid-container">
<div class="grid-item">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="grid-item">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="grid-item">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="grid-item">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="grid-item">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/395426.html