這是照片
問題的圖片
我這里有這個 CSS 代碼
.container{
display: grid;
grid-template-columns: 20% 45% 20%;
grid-column-gap: 5%;
border: 1px solid black;
}
.left{
border: 2px solid red;
height: 300px;
}
.middle{
border: 2px solid blue;
height: 300px;
}
.right{
border: 2px solid green;
height: 300px;
}
正如您在照片的最右側看到的那樣，那里有一些奇怪的間隙。我想要它，這樣那里就不會像最左邊那樣有空隙了。如何消除間隙？
我也應該在這里問這個，因為我是這個 CSS 的新手。
我應該如何更好地撰寫我的代碼。
如何同時選擇多個班級，這樣我就不必在 3 個班級重復高度。
uj5u.com熱心網友回復：
以下代碼將幫助您解決問題。
.container {
display: grid;
grid-template-columns: 20% 50% 20%;
grid-column-gap: 5%;
border: 1px solid black;
}
.col {
height: 300px;
}
.col:nth-child(1) {
border: 2px solid red;
}
.col:nth-child(2) {
border: 2px solid blue;
}
.col:nth-child(3) {
border: 2px solid green;
}<div class="container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>uj5u.com熱心網友回復：
用于space-between專案.container的通用item類：
.container {
display: grid;
grid-template-columns: 20% 45% 20%;
justify-content: space-between;
grid-column-gap: 5%;
border: 1px solid black;
}
.item{
height: 300px;
}
.left {
border: 2px solid red;
}
.middle {
border: 2px solid blue;
}
.right {
border: 2px solid green;
}<div class="container">
<div class="left item"></div>
<div class="middle item"></div>
<div class="right item"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/441414.html