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

<div>代码会在呈现时自动换行，您可能需要尝试使用<span>代码

Answer 2

你必须在像素中添加宽度，见下面的代码，这段代码将帮助你修改你的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 3

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

我将如何做：

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

嵌入youtube视频浮动使其消失

5 个答案: