我使用兩個 DIV 創建了一個相對簡單的布局。這個想法是，所有內容都在自己的 DIV 中居中，但如果沒有足夠的內容來填充一行，那么下面的內容也會居中。.row { display: table; width: 95%; text-align: center; margin-left: 2.5%; margin-right: 2.5%; margin-top: 2.5vh; margin-bottom: 2.5vh;}.item { width: 16.6%; float: left;}@media only screen and (max-device-width: 500px) {.item { width: 33.3%; float: left;}}<div class="row"><div class="item"> 1</div><div class="item"> 2</div><div class="item"> 3</div><div class="item"> 4</div><div class="item"> 5</div><div class="item"> 6</div></div></div>這些工作正常并且都是一致的。當項目數量為奇數時，就會出現問題。例如：| 1 | 2 | 3 |
| 4 | 5 | 6 |在移動設備上運行良好，但...| 1 | 2 | 3 |
| 4 | 5 | |沒有。我想要這樣的東西...| 1 | 2 | 3 |
| 4 | 5 |這意味著無論 HTML 中添加了多少項目，當這些規則被打破時，它們都會正確分發。提前致謝 ：）希望這是有道理的。
1 回答
一只甜甜圈
TA貢獻1836條經驗 獲得超5個贊
在這里，您可以使用以下解決方案Flexbox
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.item {
display: flex;
width: 20%;
height: 100px;
border: 1px Solid;
justify-content: center;
align-items: center;
margin: 5px;
}
<div class="row">
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
<div class="item">
5
</div>
</div>
- 1 回答
- 0 關注
- 110 瀏覽
添加回答
舉報
0/150
提交
取消