我將開始說明我的問題。正如您所觀察到的，我有一個容器，其中包含很多立方體元素，它們都向左浮動。但我遇到的問題是我無法將它們放在第二個容器中。綠線標記容器中存在的空白區域，因為元素向左浮動。但我希望該空間不存在，或者以某種方式在容器的左側也有一個相同大小的空間?？偨Y一下，我希望以它為中心。我嘗試過 flexbox，但只有上部容器居中，它仍然不是 100% 居中。我懷疑這是因為每個立方體都有一個像素大小，但我不知道如何用其他方法來做到這一點。這是小提琴的鏈接以及我當前代碼的外觀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 回答
揚帆大魚
TA貢獻1799條經驗 獲得超9個贊
用這個CSS修復它
.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貢獻1827條經驗 獲得超4個贊
嘗試使用CSS網格
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 關注
- 165 瀏覽
添加回答
舉報
0/150
提交
取消