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>

Answer 2

当你漂浮物品时，它们会失去高度。当您向父div添加最小高度时，问题将得到解决。

<div style="min-height: 150px;">
  <div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div style="float: left; width: 30%">
  <img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%">
  </div>
</div>

<div style="min-height: 150px;">
<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%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

<div style="min-height: 150px;">
<div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>

Answer 3

实现这一目标的方法很多

可以添加方向：rtl到第二个父div

可以改变第二个div的顺序所以div与图像在div之后用文本。

可以在第二个div中浮动img

可以使用display：flex和flex-direction：row-reverse

Answer 4

你可以使用flexbox并使用flex-direction: row-reverse;。子元素（图像和文本）上的flex属性定义了比率，在这种情况下，flex: 3的文本比图像大三倍。

Flexbox浏览器支持：https://caniuse.com/#search=flexbox

.section {
  display: flex;
  padding-bottom: 1rem;
}

.section--reversed {
  flex-direction: row-reverse;
}

.section__text {
  flex: 3;
  border: 1px dashed tomato;
}

.section__image {
  flex: 1;
  border: 1px dashed tomato;
}

<div class="section">
  <div class="section__text">Here is some text</div>
  <div class="section__image">here is an image</div>
</div>

<div class="section section--reversed">
  <div class="section__text">Here is some text</div>
  <div class="section__image">here is an image</div>
</div>

padding和border仅用于演示目的