如何使流体布局等距

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%;
}

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

如您所见，第一行和第二行的间距相等，但第三行的空间较大，对最终用户来说看起来不太好。

感谢任何帮助。

Answer 1

删除img 并使用background-image 和background-size: cover。这样您就可以使图像完全覆盖剩余的空间。

堆栈sn-p

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

堆栈sn-p

.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 使其居中。后者不允许控制 repeat。

堆栈sn-p

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