水平定位如何定位？

Question

我想在我的平滑滑块中显示一个预告片和它旁边的信息文本。然而，无论我怎么尝试，它们都会一个接一个地放在一起。

我已经尝试了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/

Answer 1

在父级上，使用

display: flex;
align-items: center;

它会把它们从左到右排成一行。只需确保其他组件是您放置这些样式的父组件的直接子组件！

Answer 2

/* Styling the Trailer Content */
#captain-marvel, #endgame {
  display: inline-flex;
  flex-direction: row;
  max-width: 1000px;
  width: 100%;
}

.left {
  float: left;
  width: 50%;
}

.right {
  float: right;
  width: 50%;
}

Answer 3

使用网格展示布局。基本上，您设置了两列:文本列和尾部列，并确保这两列都占据了父div的角色。通过这样做，您将正确地将这两个内容分开。您还可以搜索它的更多属性，如间距和组织模板的更好方法。但基本上，您可以按如下方式分隔div：

html：

<div id="captain-marvel">
    <div id="captain-marvel-title><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 id="captain-marvel-trailer">  
        <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>
</div>

css：

#captain-marvel{
    display:grid;
    grid-template-columns: 1fr 1fr;        
}
#captain-marvel-title{
    grid-column:1;
    background: red;
}
#captain-marvel-trailer{
    grid-column:2;
    background: blue;
}

我对div进行了着色，这样您就可以看到两者之间的分界。

有关更多信息，请查看此link

希望它能帮上忙！