Блог

Главная - Вопросы по программированию - Заголовок содержимого Под гибким ящиком

Заголовок содержимого Под гибким ящиком

#html #flexbox

Вопрос:

Здравствуйте, я пытаюсь добавить заголовок под видео для сайта, который я создаю. Я использую iframe в гибкой коробке. Я попытался добавить еще одну гибкую рамку только с текстом, и я могу выровнять текст с видео выше. Я очень новичок во всем этом, и после 2 часов попыток разобраться в этом я хотел посмотреть, может ли кто-нибудь указать мне правильное направление. Спасибо,

     .box-tricks {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      padding-top: 20px
      }
 
    <div class="box-tricks">
       <iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
         frameborder="0" allowfullscreen>></iframe>
       <iframe width="300" height="300" src="https://youtube.com/embed/DGBBkqamB80" 
         frameborder="0" allowfullscreen>></iframe>
       <iframe width="300" height="300" src="https://youtube.com/embed/KRZtEXDeLVc" 
        frameborder="0" allowfullscreen>></iframe>
     </div>

Комментарии:

1. Это будет ниже, чем iframe ? Где находится тег для переноса заголовка?

2. Да, я бы хотел, чтобы это было ниже iframe.

3. Вот как я это делал. <div класс=»box-tricktext»> <div класс=»box-tricktext»><p>Космическая Годзилла<p></p> </p><p>Акустическая обезьяна<p></p> </p><p>Джедай Флип<p></p> </p></div>

4. Я поместил это ниже div, который я перечислил выше, и все выравнивание было отключено.

Ответ №1:

Вы должны обернуть каждый тег iframe внутри другого тега. Не только для того, чтобы поместить заголовок внутрь, но и для того, чтобы сделать ваш CSS чище.

СОВЕТ: Лучше для SEO, если вы сделаете тег с заголовком как h2 или `h3. Зависит от порядка тегов всей страницы.

 .box-tricks {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 20px
  } 
 <div class="box-tricks">
  <div class="iframe-wrapper">
      <iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
      frameborder="0" allowfullscreen>></iframe>
      <div class="iframe-wrapper__title">MY TITLE</div>
  </div>
  <div class="iframe-wrapper">
      <iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
      frameborder="0" allowfullscreen>></iframe>
      <div class="iframe-wrapper__title">MY TITLE</div>
  </div>
  <div class="iframe-wrapper">
      <iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
      frameborder="0" allowfullscreen>></iframe>
      <div class="iframe-wrapper__title">MY TITLE</div>
  </div>    
</div>

Комментарии:

1. Хорошо, круто, поэтому я бы просто добавил Css в iframe-оболочку и то же самое для ifram_обертки, тогда?

2. Да, если вы хотите стилизовать заголовок и iframe по своему усмотрению. Позиция заголовка (основной вопрос) выполняется путем размещения заголовка каждого iframe внутри оболочки iframe.

3. Итак, еще один вопрос, каким был бы пример CSS для оболочки iframe, если я уже указываю, что должно произойти в поле-трюки <div>?

4. Получилось, спасибо вам большое!!

Ответ №2:

правильный способ-создать div-оболочку для iframes и поместить заголовок в элемент div.

 .box-tricks { display: flex; flex-direction: row; justify-content: space-around;
padding-top: 20px } .title { margin-top: 20px; text-align: center; }

<div class="box-tricks">
  <div>
    <iframe
      width="300"
      height="300"
      src="https://youtube.com/embed/BzGHbj7lquk"
      frameborder="0"
      allowfullscreen
      >></iframe
    >
    <div class="title">title</div>
  </div>
  <div>
    <iframe
      width="300"
      height="300"
      src="https://youtube.com/embed/DGBBkqamB80"
      frameborder="0"
      allowfullscreen
      >></iframe
    >
    <div class="title">title</div>
  </div>
  <div>
    <iframe
      width="300"
      height="300"
      src="https://youtube.com/embed/KRZtEXDeLVc"
      frameborder="0"
      allowfullscreen
      >></iframe
    >
    <div class="title">title</div>
  </div>
</div>
Метки: