Question

这是我到目前为止所拥有的：

我有一个响应式视频和一个段落。我想要的是有这样的结果：

如果尺寸足够宽，文字将显示在右侧。
如果尺寸太小，文字将显示在底部。

这是我的小提琴代码： https://jsfiddle.net/sLzxs5su/6/

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

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

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

}

在段落上添加浮动将使我的视频因某种原因消失。

Answer 1

您可以使用CSS3媒体查询来解决此问题 media queries的详细信息这是Responsive Web design

的一个很好的教程

Answer 2

您可以使用此CSS：

.flag {
  display: table;
  width: 100%;
}

.flag__image,
.flag__body {
  display: table-cell;
  vertical-align: middle;
}
.flag--top .flag__image, .flag--top
.flag__body {
  vertical-align: top;
}
.flag--bottom .flag__image, .flag--bottom
.flag__body {
  vertical-align: bottom;
}

.flag__image {
  padding-right: 10px;
}
.flag__image > * {
  display: block;
  max-width: none;
}
.flag--rev .flag__image {
  padding-right: 0;
  padding-left: 10px;
}

.flag__body {
  width: 100%;
}

使用此HTML：

<div class="flag">
  <div class="flag__image">
    <iframe src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="flag__body">
    <p> @@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@ @@@@@@@@@ @@@@@@@@ @@@@@@ @@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@ @@@@@@@  @@@@@@@@@@ @@@@@@@@@@@@ @@@@@@@@@ @@@@@@@@@ @@@@@@@ @@@@@@@</p>
  </div>
</div>

Answer 3

要求：

如果尺寸足够宽，文字将显示在右侧。
如果尺寸太小，文字将显示在底部。

逻辑：（针对要求1）

1）使用数字元素＆amp;其中包含视频（html5）。

2）在视频之后使用figcaption元素并在其中声明伴随<p>标签的文本，然后声明figure元素占据100％宽度，因为它是视频和文本的复制者。之后，声明视频元素宽度为50％（或适合您自己）。因为你希望它在文本的左侧，因此将其声明为float:left

3）声明figcaption占据宽度的其余部分，即（因为你想要它在大屏幕的视频右侧，因此你必须使用float:right

逻辑：（针对要求2）

1）要使用小屏幕，您需要使用媒体查询并达到最小宽度，然后布局应该更改...即max-width: 400px。

2）因为你想把文字带到底部，从技术上讲，你要求文本div占用新行，因此将其宽度声明为100％

代码：

figure {
    width:100%;
}
figure iframe{
    height:100%; width:50%;float:left;

}

figure figcaption {
    width:50%;
    float:right;
}
@media only screen and (max-width: 480px) {

figure iframe{
    height:100%; width:100%;

}

figure figcaption {
    width:100%;
    text-align:center;
}
}

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

updated fiddle

Answer 4

https://jsfiddle.net/Lgb4de7u/

<div class="column">
    <div class="video-container">
        <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
<div class="column">
    <p>@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @@@@@@ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p>
</div>

这里的CSS：

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

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

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

@media (max-width:767px) {
    .column {
        float:none;
        width:100%;
    }
}

漂浮在响应式视频div和段落上

4 个答案: