以下示例中的兩個問題：
- 為什么
grida不是水平居中 -margin: 0 auto - 為什么
cins不完全可見 - 父母是overflow-x:visible
.grida{
display:grid;
grid-template-columns:99px 140px 99px;
margin:0 auto;
background:lightblue;
}
.gridab{
overflow-y:scroll;
}
.gridaa, .gridac{
height:150vh; overflow-y:scroll; overflow-x:visible;
background:silver;
position:relative;
}
.cins{
position:absolute;
right:-54px; top:25px; width: 200px;
height:70vh; background:orange;
}<div class='grida'>
<div class='gridaa'></div>
<div class='gridab'></div>
<div class='gridac'>
<div class='cins'></div>
</div>
</div>uj5u.com熱心網友回復：
為什么
grida不是水平居中 -margin: 0 auto
grida是完整的視口寬度，因此將其水平居中在視口內有點荒謬。
為什么幻燈片不完全可見 - 父母是
overflow-x:visible
水平溢位不起作用，因為垂直溢位是scroll. 根據 MDN，對于overflow-x：
如果 overflow-y 是隱藏的、滾動的或自動的并且這個屬性是可見的，它會隱式地計算為自動。
如果您在瀏覽器開發工具中檢查元素并查看計算的樣式，您會看到overflow-x已決議為auto，并auto為您提供水平滾動條。
uj5u.com熱心網友回復：
為什么grida沒有水平居中-margin：0 auto
它居中。但它占據了整個寬度，將寬度設定為 338px (99px 140px 99px) 你看到它是居中的。
為什么幻燈片不完全可見-父級溢位-x：可見
您正在使用網格布局，并且您已經為 3 列定義了精確的寬度99px 140px 99px。嚴格遵守這些尺寸。此外，.cins元素被定位為absolute，并且父級無論如何都不會檢測到所包含元素的寬度（它的作業原理是這樣的）。
.grida {
display: grid;
grid-template-columns: 99px 140px 99px;
margin: 0 auto;
background-color: red;
width: 338px;
padding: 20px;
}
.gridaa,
.gridac {
height: 150vh;
overflow-y: scroll;
overflow-x: visible;
background: silver;
position: relative;
}
.cins {
position: absolute;
display:inline-block;
right: -54px;
top: 25px;
width: 200px;
height: 70vh;
background: orange;
}<div class='grida'>
<div style="background-color:pink">99px</div>
<div style="background-color:yellow">140px</div>
<div style="background-color:green">99px</div>
</div>
<div class='grida'>
<div class='gridaa'></div>
<div class='gridab'></div>
<div class='gridac'>
<div class='cins'></div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474066.html
下一篇：隱藏導航元素時拉伸主體