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

许多方法可以实现这一目标

可以将direction：rtl添加到第二个父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仅用于演示目的