浮动嵌入 youtube 视频使其消失

Question

我想将 2 个 div 内联。第一个 div 是从 youtube 嵌入的视频。第二个 div 带有一些文本。我尝试使用浮动和清除，但是当我使用它时，视频消失了。我尝试使用 display: inline-block 但我收到了相同的结果。我用clear:both 在底部尝试了一个空的div，结果并不满意。我真的很想知道问题出在哪里？视频容器是响应式的。也许这会导致问题？下面我附上一段代码。

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

Answer 1

我会这样做：

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

Answer 2

试试这个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;
 }

Answer 3

您必须以像素为单位添加宽度，请参见下面的代码，此代码将帮助您修改 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>

Answer 4

这是因为将 .video-container iframe 的位置设置为绝对位置， .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;
   }

Answer 5

<div> 标签在渲染时会自动换行，你可能想试试<span> 标签