html - 如何固定水平定位?
问题描述
我想在我的光滑滑块中显示预告片和信息文本。但是,无论我尝试什么,它们都位于彼此之上。
我试过 flexbox,并将它们排成一行。我还尝试了内联显示,并为每个 div 左右浮动。
/* Styling the Trailer Slick Slider */
.single-item-rtl {
max-width: 1100px;
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
float: left;
}
/* Styling the Trailer Content */
#captain-marvel,
#endgame {
display: inline-flex;
flex-direction: row;
max-width: 1000px;
}
<article id="secondThirdArticle">
<div class="middleh3">Trailers & New Releases</div>
</br>
<div class="inner-grid">
<div dir="rtl" class="single-item-rtl">
<div id="captain-marvel">
<div>
<h4> Captain Marvel </h4>
<p>The MCU’s most powerful hero is set to land on the big screen. Brie Larson stars as Carol Danvers, aka Captain Marvel, alongside Samuel L. Jackson as Nick Fury, and Jude Law as Walter Lawson. In the midst of an inter-galactic war that threatens
to destroy the Earth, Carol Danvers must rise to a seemingly impossible challenge. Following the post-credit teaser of Avengers: Infinity War Part One, Captain Marvel is one of the most eagerly anticipated films of the year.</p>
</div>
<div>
<iframe width="504" height="284" src="https://www.youtube.com/embed/Z1BCujX3pw8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</br>
</div>
<div id="endgame">
<div>
<h4> Avengers: Endgame </h4>
<p>The grave course of events set in motion by Thanos that wiped out half the universe and fractured the Avengers ranks compels the remaining Avengers to take one final stand in Marvel Studios' grand conclusion to twenty-two films, Avengers: Endgame.</p>
</div>
<div>
<iframe width="504" height="284" src="https://www.youtube.com/embed/TcMBFSGVi1c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</br>
</div>
</div>
</div>
</br>
<a href="#" class="myButton">See All Trailers</a>
</article>
`
我想要一些居中的文本,在预告片的一侧有一个标题。他们最终在彼此之上。见网站: http: //www.student.city.ac.uk/~aczc972/
解决方案
在父级上,使用
display: flex;
align-items: center;
它将左右排列。只需确保其他组件是您放置这些样式的父组件的直接子组件!
推荐阅读
- mongodb - 想要文档中存在的子文档,来自 MongoDB 数据库
- c++ - 在 C++ 中解析和切片 char[]
- android - Android停止屏幕录制权限提示
- c# - '不能将 Newtonsoft.Json.Linq.JArray 转换为 Newtonsoft.Json.Linq.JToken
- python - pip install 如何知道要安装哪些依赖项?
- python - 如何在 python 中执行微积分运算?
- javascript - 将变量应用于 json 路径
- c - 这个函数返回什么?(有时相同的字符串,有时缺少一个字符)
- django - 在 Django REST 框架中使用 request.user 进行字段级验证
- haskell - 关于模式匹配的问题:为什么我不能对连接使用相同的参数?