如何使用 HTML、CSS 和 Js 使 div 位于所有屏幕类型中的特定元素旁边？
[英]How can i make a div stay next to a specifc element in all Screens types with HTML, CSS and Js?
问题描述
I'm having struggles with what I'm trying to acomplish.
我正在努力完成我想要完成的工作。 Basicly I have 2 colums in my HTML and on my left colum I have text and want to have div's on the right colum with videos stay near certain parts of the text.基本上，我的 HTML 中有 2 列，在我的左列上有文本，并且希望在右列上有 div，视频保持在文本的某些部分附近。 Diferent aproaches I have tried are table cells, who I couldn' make work how I wanted because it would deformat the text creating big spaces between paragraphs to fit in the size of the video on the right.我尝试过的不同方法是表格单元格，我无法按照我想要的方式进行工作，因为它会变形文本，在段落之间创建大空间以适应右侧视频的大小。 I have also tried dummy divs to fill the vertical space but this won't work for all screens since the div's sizes will be diferent.我也尝试过使用虚拟 div 来填充垂直空间，但这不适用于所有屏幕，因为 div 的大小会有所不同。 I've tried searching for some anchors that could be attached to the text somehow where I could create a div next to it without influencing the text itself but I'm kinda lost.我试过寻找一些可以以某种方式附加到文本的锚点，我可以在它旁边创建一个 div 而不影响文本本身，但我有点迷失了。 I hope this question is according to the rules.我希望这个问题是符合规则的。 Thanks in advance.提前致谢。
1 个解决方案
解决方案1
0 2019-03-04 11:44:50
Please check this link and let me know whether you want this type of layout请检查此链接，让我知道您是否想要这种类型的布局
.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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.