Как исправить позиционирование по горизонтали? - PullRequest
Новая
       12

Как исправить позиционирование по горизонтали?

0 голосов
/ 02 апреля 2019

Я хочу показать трейлер и информационный текст рядом с ним в моем скользком слайдере.Тем не менее, они расположены друг над другом, что бы я ни пытался.

Я попробовал flexbox, и расположил их в ряды.Я также попробовал встроенное отображение, и плавал вправо и влево для каждого деления.

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

Ответы [ 3 ]

2 голосов
/ 02 апреля 2019

На родителя, используйте 

display: flex;
align-items: center;

и выстроит их влево-вправо. Просто убедитесь, что остальные компоненты являются прямыми дочерними элементами родительского элемента, для которого вы наделили эти стили!

0 голосов
/ 02 апреля 2019

Использовать сетку выставочного макета. По сути, вы устанавливаете два столбца: текстовый столбец и трейлер и убедитесь, что оба они занимают роль родительского элемента 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, чтобы вы могли видеть разделение между ними.

Для получения дополнительной информации, пожалуйста, проверьте эту ссылку

Надеюсь, это поможет!

0 голосов
/ 02 апреля 2019 
/* 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%;
}
...