我希望“.on-the-left”容器與“.on-the-right”容器大小相同,而不使用相對或絕對位置。
這是我想要的視覺結果:https ://jsfiddle.net/NicoZZZ/osbL16z9/28/
如果我找到一個干凈的替代方案,這就是我考慮避免的:
.on-the-left {
position: relative;
}
.container-child {
position: absolute;
}
uj5u.com熱心網友回復:
我不確定這是否滿足所有要求,但下面的代碼在沒有relativeorabsolute定位的情況下產生相同的結果。
.container-parent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: fit-content(1em);
background: pink;
}
.on-the-left {
background: lightblue;
overflow-y: scroll;
}
.on-the-right {
background: lightgreen;
}
<div class='container-parent'>
<div class='side-container on-the-left'>
<div class='container-child'>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<!-- After this point you should scroll to see "more text -->
<p>More text</p>
<p>More text</p>
<p>More text</p>
</div>
</div>
<div class='side-container on-the-right'>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</div>
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/428660.html
