HTML - 如何在 div 中拆分不同的比例？

Question

我正在尝试像图像一样进行布局，但我没有做到。

我的代码:

<div>
<div style="float: left; width: 70%">I'm on the left</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

<div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
<div style="float: left; width: 70%">I'm on the second on the left</div>
</div>

<div>
<div style="float: left; width: 70%">I'm on the left</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

有什么方法可以实现我需要的布局？

Answer 1

添加宽度:100%；向左飘浮;像下面这样的父 div

<div style="width: 100%; float:left; margin-bottom: 30px;">
<div style="float: left; width: 70%; background: green">I'm on the left</div>
<div style="float: left; width: 30%; background: red"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

<div style="width: 100%; float:left; margin-bottom: 2px">
<div style="float: left; width: 30%; background: green"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
<div style="float: left; width: 70%; background: red">I'm on the second on the left</div>
</div>

<div style="width: 100%; float:left;">
<div style="float: left; width: 70%; background: green">I'm on the left</div>
<div style="float: left; width: 30%; background: red"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>