Question

这是我的小提琴：

这是css代码：

.viddiv{
   float:left; width:50%;  
}

.vidholder{
    position:relative;height:0;padding-bottom:50%;
    width:50%;
    float:left;
}

iframe{
    position:absolute; height:100%; width:100%;top:0;left:0;

}

我想把视频放在右边的视频旁边，我已经尝试将其设置为float:left，但它仍然无法正常工作。我该怎么办？

Answer 1

Codepen http://codepen.io/noobskie/pen/gaorXm?editors=110

我不确定下面的代码在哪里适用于此

.viddiv{
   float:left; width:50%;  
}

<强>段

＆＃13;

.vidholder {
  position: relative;
  height: 0;
  padding-bottom: 50%;
  width: 50%;
  float: left;
}
iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.textContainer {
  width: 50%;
  float: right;
}

＆＃13;

<div style="width:100%">

  <div class="vidholder">
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="textContainer">
    <p style=" word-wrap: break-word;">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
  </div>
</div>

＆＃13;

修改 float:left无效的原因是因为您使用absolute位置使iframe响应，但absolute位置div折叠导致文本隐藏在iframe下面。

Answer 2

在您的html代码中，您将视频包含在100％宽度的div中。该段应该包含在该div中吗？

<div style="width:100%">

  <div class="vidholder">
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
  </div>

  <p style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>

</div>

Answer 3

我想将视频旁边的段落放在右侧

这是一种非常简单的方法：

<强> CSS

x / 255.0

DEMO：https://jsfiddle.net/9yj63s3f/1/

详细了解CSS Flexbox。

Answer 4

简单的解决方案是将 p 标记更改为预先，这将填充视频div右侧的文字。

<pre style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</pre>

Answer 5

我稍微调了一下你的小提琴，这就是结果代码:(如果你没有小提琴的话）

<style>

.viddiv{
   float:left; width:50%;  
}

.vidholder{
    position:relative;height:0;padding-bottom:50%;
    width:50%;
    float:left;
}
figure {
    width:100%;
}
figure iframe{
    height:100%; width:50%;float:left;

}

figure figcaption {
    width:50%;
    float:right;
}
</style>

<div style="width:100%">

<div class="vidholder">
<figure>
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
    <figcaption>
        <p style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
    </figcaption>
</figure>
</div>

</div>

jsfiddle

Float：左边的div，右边有一个段落/文字

5 个答案: