如何使流体布局等间距

Question

我的问题是设计和代码问题，我有一个对角线布局，包括一段文字与一个图像配对，然后在下一行翻转（图像然后段落）。

问题是我不知道段落的高度或图像的高度，所以我如何使它最终用户间隔均匀？

Here is a fiddle that may help explain my question.

我的代码：

<div class="container">

    <div class="one">
        <p>

        </p>
    </div>

    <div class="two">
        <img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
    </div>

</div>

<div class="container">

    <div class="two">
        <img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
    </div>

    <div class="one">
        <p>

        </p>
    </div>

</div>

<div class="container">

    <div class="three">
        <p>

        </p>
    </div>

    <div class="two">
        <img src="https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce">
    </div>

</div>

.one{
  height:200px;
  background:red;
  width:50%;
  float:left;
}
.two{
  float:left;
  height:auto;
  background:blue;
  width:50%;

}
.three{
  float:left;
  height:400px;
  background:blue;
  width:50%;

}
.container{
  height:auto;
  display:flex;
  flex-direction:row;
  align-items:center;
}
img{
  float:left;
  width:100%;
}

第一类是段落（较短的段落）类.two是图片类。三是一个较长的段落

正如你所看到的那样，第一排和第二排的间距相等，但第三排的空间更大，对最终用户来说看起来不太好。

任何帮助表示赞赏。

Answer 1

放下img并使用background-image和background-size: cover。通过它，您可以使图像完全覆盖左侧空间。

堆栈代码段

.one {
  height: 200px;
  background: red;
  width: 50%;
}

.two {
  background: url('https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce') center;
  background-size: cover;
  border: 1ps solid red;
  width: 50%;
}

.three {
  height: 400px;
  background: blue;
  width: 50%;
}

.container {
  display: flex;
}

<div class="container">

  <div class="one">
    <p>
    </p>
  </div>
  <div class="two">
  </div>
</div>

<div class="container">
  <div class="two">   
  </div>
  <div class="one">
    <p>
    </p>
  </div>

</div>
<div class="container">

  <div class="three">
    <p>
    </p>
  </div>
  <div class="two">
  </div>
</div>

---

或者如果整个图片应该可见，请使用background-size: contain代替。

堆栈代码段

.one {
  height: 200px;
  background: red;
  width: 50%;
}

.two {
  background-image: url('https://cdn.jamesedition.com/media/W1siZiIsImxpc3RpbmdfaW1hZ2VzLzIwMTcvMDkvMDkvMjEvNTgvNDUvMGJkYTRmYTMtMTY1Yy00YmQzLThhZTEtNTlhNzc2NGYwNDBjL3AxLUoycDhOV0xHdnM4RDNVdUphaW5xRWxMMWxEcnpaQzlyNXg0a2xKREUuanBnIl0sWyJwIiwidGh1bWIiLCIyMDAweCJdLFsicCIsIndhdGVybWFyayJdLFsicCIsImVuY29kZSIsImpwZyIsIi1zdHJpcCAtcXVhbGl0eSA4MCAtaW50ZXJsYWNlIFBsYW5lIl1d/2015-lamborghini-aventador-roadster.jpg?sha=6b14013f088579ce');
  
  background-position: center center; /*  or "left top", and so on  */
  background-repeat: no-repeat;       /*  or "repeat-y", and so on  */
  background-size: contain;
  border: 1ps solid red;
  width: 50%;
}

.three {
  height: 400px;
  background: blue;
  background-repeat: no-repeat;       /*  or "repeat-y", and so on  */
  width: 50%;
}

.three + .two {                       /*  where class .two comes after .three  */
  background-repeat: repeat-y;        /*  repeat vertically  */
  background-position: center top;    /*  start at "center top"  */
}

.container {
  display: flex;
}

<div class="container">

  <div class="one">
    <p>
    </p>
  </div>
  <div class="two">
  </div>
</div>

<div class="container">
  <div class="two">   
  </div>
  <div class="one">
    <p>
    </p>
  </div>

</div>
<div class="container">

  <div class="three">
    <p>
    </p>
  </div>
  <div class="two">
  </div>
</div>

---

根据评论更新。

如果图像不应该按比例放大，而是按比例缩小，则需要脚本来检测图像大小并在background-size: contain（缩小）和background-size: auto（保持组织大小）之间切换，或者，如下所示，使用img，与transform结合使用。后者不允许控制重复。

堆栈代码段

.one {
  height: 200px;
  background: red;
  width: 50%;
}

.two {
  position: relative;
  width: 50%;
  overflow: hidden;
}

.two img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.three {
  height: 400px;
  background: blue;
  width: 50%;
}

.container {
  display: flex;
}

<div class="container">

  <div class="one">
    <p>
    </p>
  </div>
  <div class="two">
    <img src="http://placehold.it/100" alt="">
  </div>
</div>

<div class="container">
  <div class="two">   
    <img src="http://placehold.it/800" alt="">
  </div>
  <div class="one">
    <p>
    </p>
  </div>

</div>
<div class="container">

  <div class="three">
    <p>
    </p>
  </div>
  <div class="two">
    <img src="http://placehold.it/800" alt="">
  </div>
</div>