Я хочу поставить 2 div в строке. Первый div - это видео, вставленное с YouTube. Второй div с некоторым текстом. Я попытался с float и clear, но когда я использую это, видео исчезает. Я пытался с display: inline-block, но я получил тот же результат. Я попытался с пустым div внизу с clear:both, результат не был доволен. Я действительно хочу знать, где проблема? Контейнер видео является отзывчивым. Может быть, это может вызвать проблему? Я приложу раздел кода ниже.

.desc {
  border-left: 4px solid #80d4ff;
  padding: 6px 10px 8px 6px;
  text-indent: 5px;
  background-color: #fff;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin: 15px 0;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoHndl {
  max-width: 500px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
<div class="videoHndl">
  <div class="video-container">
    <iframe width="500px" height="280" src="https://www.youtube.com/embed/HRbD4UcK-0I">
            </iframe>
  </div>
  <div class="desc">
    <p><b>Description:</b></p>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
  </div>
</div>
1
Robert Balaurea 4 Сен 2017 в 16:30

5 ответов

Лучший ответ

Вот как бы я это сделал:

.desc{
    margin-left: 500px;
    border: 1px black solid;
    border-left: 4px solid #80d4ff;
    padding: 6px 10px 8px 6px;
    text-indent: 5px;
    background-color: #fff;
}
.video-container {
    float: left;
    clear: left;
    padding-bottom: 56.25%;
    overflow: hidden;
    width: 500px;
    height: 280px;
    border: 1px green solid;
}

 .videoHndl{
    width: 800px;
    height: 400px; /* to be updated to the desired height */
    margin: 0;
    padding: 0;
    overflow: hidden;
   border: 1px blue solid;
}
<div class="videoHndl">
    <div class="video-container">
        <iframe width="500px" height="280"
        src="https://www.youtube.com/embed/HRbD4UcK-0I">
        </iframe>
    </div>
    <div class="desc">
        <p><b>Description:</b></p>
        <p>Some text Some text Some text Some text Some text Some text 
        Some text Some text Some text Some text Some text Some text Some 
        text Some text Some text Some text </p>
    </div>
</div>
0
ChrisL 4 Сен 2017 в 14:37

Попробуйте этот код CSS

.desc{
  border-left: 4px solid #80d4ff;
  padding: 6px 10px 8px 6px;
  text-indent: 5px;
  background-color: #fff;
}
.video-container {
  overflow: hidden;
  margin: 15px 0;
  width: 100%;
}
 .videoHndl{
   margin: 0;
   padding: 0;
   overflow: hidden;
   display: flex;
   justify-content: flex-start;
 }
0
Matteo Boscolo 4 Сен 2017 в 13:43

Это происходит из-за установки абсолютного положения для iframe .video-container, объекта .video-container, классов встраивания .video-container. Удалите параметр и установите значение float: left для дескриптора видео, и вы сможете увидеть два элемента div рядом. Таким образом, ваш отредактированный CSS должен быть таким.

.video-container iframe,
.video-container object,
.video-container embed {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }
.videoHndl{
   max-width: 500px;
   margin: 0;
   padding: 0;
   overflow: hidden;
   float:left;
   }
0
Paolo Forgia 4 Сен 2017 в 14:36

Тег <div> автоматически принимает новую строку при рендеринге, вместо этого вы можете попробовать тег <span>

0
Leonardo Alves Machado 4 Сен 2017 в 14:53

Вы должны добавить ширину в пикселях, см. Код ниже, этот код поможет вам изменить ваш CSS.

.desc {
  border-left: 4px solid #80d4ff;
  padding: 6px 10px 8px 6px;
  text-indent: 5px;
  background-color: #fff;
  float: left;
  width: 150px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin: 15px 0;
  float: left;
  width: 300px;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoHndl {
  max-width: 500px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
<div class="videoHndl">
  <div class="video-container">
    <iframe width="300px" height="280" src="https://www.youtube.com/embed/HRbD4UcK-0I">
      </iframe>
  </div>
  <div class="desc">
    <p><b>Description:</b></p>
    <p>Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
  </div>
</div>
0
Ovidiu Unguru 4 Сен 2017 в 14:35