我開始創建一個基于float的網格系統，并通過padding在列之間添加了溝槽。0 0.75em;應用于列，margin-right: -0.75em;和margin-left: -0.75;應用于行。
當我有一個全寬的容器時，它顯示在視口寬度之外，并顯示水平滾動條。
我希望最左邊和最右邊的元素能夠沿著視口的邊緣粘貼，但仍然希望保留元素之間的溝槽。我一定是錯過了什么。希望得到任何幫助，謝謝！
這里有一個CSS檔案，它是一個很好的例子。
下面是CSS和HTML：
.container-full {
width: 100%;
}
.row {
margin-right: -0.75em;
margin-left: -0.75em;
}
.row::before,
.row::after {
display: block;
內容。"";
clear: both;
}
[class*="column-"] {
float: left;
padding-right: 0.75em;
padding-left: 0.75em;
<div class="container-full">
<div class=" row">
<div class="column-3">
<div class="exhibition-brief">
<img src=" 。 /img/img01.jpg" alt="Image">。
</div>/span>
</div>/span>
<div class="column-3">
<div class="exhibition-brief">
<img src=" 。 /img/img02.jpg" alt="Image">。
</div>/span>
</div>/span>
<div class="column-3">
<div class="exhibition-brief">
<img src=" 。 /img/img03.jpg" alt="Image">。
</div>/span>
</div>/span>
<div class="column-3">
<div class="exhibition-brief">
<img src=" 。 /img/img04.jpg" alt="Image">。
</div>/span>
</div>/span>
</div>/span>
</div>/span>
uj5u.com熱心網友回復：
你可以通過使用CSS Grid和grid-gap屬性來實作這一點。
<div class="container">
<img src="https://picsum. photos/1920/1080" alt=""/span>>
<img src="https://picsum. photos/1920/1081" alt=""/span>>
<img src="https://picsum. photos/1920/1082" alt=""/span>>
<img src="https://picsum. photos/1920/1083" alt=""/span>>
</div>
.container {
width: 100vw;
高度: 100vh;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 0.75rem;
}
img {
最大寬度：100%。
高度：100%。
物件適合：覆寫。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/333983.html
標籤：