如何將 div 與 position:fixed 並排對齊？

Question

我需要一種方法來讓子 div 具有position:fixed到左側並排浮動。 如果其中一個子 div 是display:none ，那么其余的子 div 會移動。

position:fixed即使使用display:inline-block或float:left也會使它們全部重疊。

並且position:absolute和position:sticky將它們與它們的父 div 一起移動。

這是我正在嘗試做的事情的 gif：

 <div class="wrapper"> <div class="parent-1"> <div class="child-1">1</div> </div> <div class="parent-2"> <div class="child-2">2</div> </div> <div class="parent-3"> <div class="child-3">3</div> </div> </div>

Answer 1

position: fixed將元素完全移出流程並將它們fixed到視口。 移動position: fixed到父項並使用父項上的 flexbox 對齊行中的子項。

 var button = document.querySelector('button'); button.addEventListener('click', function() { document.querySelector('.parent-2').classList.toggle('d-none'); });

 .wrapper { position: fixed; bottom: 0; display: flex; } /* for visualization purpose only */ [class*="parent-"] { width: 80px; padding: 5px; border: 2px dashed red; } .d-none { display: none; }

 <div class="wrapper"> <div class="parent-1"> <div class="child-1">1</div> </div> <div class="parent-2"> <div class="child-2">2</div> </div> <div class="parent-3"> <div class="child-3">3</div> </div> </div> <button>Click here to show/hide element 2</button>