如何在没有媒体查询的情况下让我的文本换行的同时制作两个 div 堆栈

How can I make two divs stack whilst still having my text wrap without media queries

我已经设法使视频响应我的页面,并使文本环绕视频,但我无法使它们一起工作。

理想情况下我想要这样:

桌面版:

变成这样: 手机版

这是迄今为止我想到的最好的内容堆栈但文本不换行或文本换行但不堆叠。我怎样才能做到这两点?

这一切都需要内联并且 HTML/CSS 只有当它进入我的 POS 系统时,它无法处理太多。

<div style="max-width:1000px; width:100%;font-size:0px;">
<!--VIDEO-->
<div style="float:right;width:100%; max-width:450px; display:inline:block;">
<div style="width:100%;position:relative; padding-bottom:56.25%; height:0px;">
<iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" height="441" width="480" src="[VIDEO SOURCE]" frameBorder="0" allowfullscreen></iframe>
</div>
</div>
<!--END VIDEO-->

<p style="font-size:20px; width:100%; max-width:550px; display:inline-block; vertical-align:top;">TEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE  HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE
</p>
</div>

我已经稍微更改了您的代码,但我不确定这是否对您有帮助。请检查一次。 :)

<div style="max-width:1000px; width:100%;font-size:0px;">
<!--VIDEO-->
<div style="float:right;width:100%; max-width:450px;">
<div style="width:100%;position:relative; padding-bottom:56.25%; height:0px;">
<iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" height="441" width="480" src="[VIDEO SOURCE]" frameBorder="0" allowfullscreen></iframe>
</div>
</div>
<!--END VIDEO-->

<p style="font-size:20px;">TEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE  HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERETEXT HERE
</p>
</div>