如何使用 HTML、CSS 和 Js 使 div 位於所有屏幕類型中的特定元素旁邊？

Question

我正在努力完成我想要完成的工作。 基本上，我的 HTML 中有 2 列，在我的左列上有文本，並且希望在右列上有 div，視頻保持在文本的某些部分附近。 我嘗試過的不同方法是表格單元格，我無法按照我想要的方式進行工作，因為它會變形文本，在段落之間創建大空間以適應右側視頻的大小。 我也嘗試過使用虛擬 div 來填充垂直空間，但這不適用於所有屏幕，因為 div 的大小會有所不同。 我試過尋找一些可以以某種方式附加到文本的錨點，我可以在它旁邊創建一個 div 而不影響文本本身，但我有點迷失了。 我希望這個問題是符合規則的。 提前致謝。

繪畫中的圖像以幫助

Answer 1

請檢查此鏈接，讓我知道您是否想要這種類型的布局

 .row { align-items: flex-end; display: flex; } .bg-red { background: red; } .col-6 { width: 50%; }

 <div class="container-fluid"> <div class="row"> <div class="col-6"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> </div> <div class="col-6"> <video width="100%" height="300" controls> <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"> </video> </div> </div> <div class="row bg-red"> <div class="col-6"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremq natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p> </div> <div class="col-6"> <video width="100%" height="300" controls> <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4"> </video> </div> </div> </div>