我想弄清楚如何將第三個 div 居中。所以在全寬上我在網格中有 3 個盒子。它們的寬度為 400 像素。當寬度為 1220px 時，會變成連續 2 個框。所以我的第三個框是靠左對齊的。我如何將其居中而不破壞寬度。因為我嘗試過margin: 0 auto，它只是使它與里面的東西一樣寬。這是我的代碼：.wraper { display: grid; grid-template-columns: 400px 400px 400px; grid-gap: 10px; grid-template-columns: repeat(3, 400px);}.box { background-color: red; height: 200px;}@media (max-width: 1220px) { .wraper { grid-template-columns: repeat(2, 400px); }}@media (max-width: 810px) { .wraper { grid-template-columns: repeat(1, 400px); }}@media (max-width: 400px) { .wraper { grid-template-columns: repeat(1, 300px); }}<div class="block bg-success"> <h1>Projects</h1> <div class="wraper"> <div class="box">A</div> <div class="box">B</div> <div class="box">C</div> </div></div>
1 回答
SMILET
TA貢獻1796條經驗 獲得超4個贊
在 1220px 媒體查詢中，添加一條規則以使第三個 div 居中。
@media (max-width: 1220px) {
.wrapper {
grid-template-columns: repeat(2, 400px);
}
/* NEW */
.box:last-child {
grid-column: 1 / 3;
justify-self: center;
width: 400px;
}
}
.wrapper {
display: grid;
grid-template-columns: 400px 400px 400px;
grid-auto-rows: 200px;
grid-gap: 10px;
grid-template-columns: repeat(3, 400px);
}
@media (max-width: 1220px) {
.wrapper {
grid-template-columns: repeat(2, 400px);
}
/* NEW */
.box:last-child {
grid-column: 1 / 3;
justify-self: center;
width: 400px;
}
}
@media (max-width: 810px) {
.wrapper {
grid-template-columns: repeat(1, 400px);
}
/* RESET */
.box:last-child {
grid-column: auto;
justify-self: stretch;
width: auto;
}
}
@media (max-width: 400px) {
.wrapper {
grid-template-columns: repeat(1, 300px);
}
}
.box {
background-color: red;
}
<div class="block bg-success">
<h1>Projects</h1>
<div class="wrapper">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
</div>
- 1 回答
- 0 關注
- 157 瀏覽
添加回答
舉報
0/150
提交
取消