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

html - HTML-如何在div中分割不同的比率?-LMLPHP

我的代码:

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


有什么方法可以实现所需的布局?

最佳答案

增加宽度: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>

10-07 19:15
查看更多