我將開(kāi)始說(shuō)明我的問(wèn)題。正如您所觀察到的，我有一個(gè)容器，其中包含很多立方體元素，它們都向左浮動(dòng)。但我遇到的問(wèn)題是我無(wú)法將它們放在第二個(gè)容器中。綠線標(biāo)記容器中存在的空白區(qū)域，因?yàn)樵叵蜃蟾?dòng)。但我希望該空間不存在，或者以某種方式在容器的左側(cè)也有一個(gè)相同大小的空間?？偨Y(jié)一下，我希望以它為中心。我嘗試過(guò) flexbox，但只有上部容器居中，它仍然不是 100% 居中。我懷疑這是因?yàn)槊總€(gè)立方體都有一個(gè)像素大小，但我不知道如何用其他方法來(lái)做到這一點(diǎn)。這是小提琴的鏈接以及我當(dāng)前代碼的外觀https://jsfiddle.net/qajyzkhu/3/ .calendar-container{ background-color:rgb(151,203,228); height:100vh; overflow: scroll; overflow-x: hidden; display:flex; justify-content: center;}.fieldsContainer{ width:90%; }.cube-lived{ float: left; width: 19px; height: 19px; border: 1px solid rgba(0, 0, 0, .2); margin: 1px; background-color: rgba(6,30,57); }
2 回答
揚(yáng)帆大魚(yú)
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊
用這個(gè)CSS修復(fù)它
.calendar-container{
background-color:rgb(151,203,228);
height:100vh;
overflow: scroll;
overflow-x: hidden;
display:flex;
justify-content: center;
}
.fieldsContainer{
width:90%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
grid-auto-rows: 20px;
}
.cube-lived{
float: left;
border: 1px solid rgba(0, 0, 0, .2);
margin: 1px;
background-color: rgba(6,30,57);
}
GCT1015
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊
嘗試使用CSS網(wǎng)格
display: grid;
.fieldsContainer{
width:90%;
display: grid;
grid-template-columns: repeat(auto-fit, 20px);
grid-gap: 1px;
}
.cube-lived {
background-color: rgba(6,30,57);
height: 20px;
width: 20px;
}
- 2 回答
- 0 關(guān)注
- 181 瀏覽
添加回答
舉報(bào)
0/150
提交
取消