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

使用网格展览布局。基本上，您设置了两列：text列和trailer列，并确保它们都占据了父div角色。这样，您将正确分离这两个内容。您还可以搜索它的更多属性，例如间距和更好的组织模板的方法。但基本上，您可以按如下所示分隔div：

html：

breakpoint command add -s python

css：

<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>

我为div上色，以便您可以看到两者之间的界限。

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

希望有帮助！

如何水平定位？

3 个答案: