我想弄清楚如何將第三個(gè) div 居中。所以在全寬上我在網(wǎng)格中有 3 個(gè)盒子。它們的寬度為 400 像素。當(dāng)寬度為 1220px 時(shí)，會(huì)變成連續(xù) 2 個(gè)框。所以我的第三個(gè)框是靠左對(duì)齊的。我如何將其居中而不破壞寬度。因?yàn)槲覈L試過(guò)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貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
在 1220px 媒體查詢中，添加一條規(guī)則以使第三個(gè) 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 關(guān)注
- 173 瀏覽
添加回答
舉報(bào)
0/150
提交
取消