html - 如何使流体布局等距

Question

我的问题既是设计问题又是代码问题，我有一个对 Angular 线布局，它由一段文本和一张图片组成，然后在下一行翻转(图片然后是段落)。

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

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是图片.three类是较长的段落

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

感谢任何帮助。

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(保持 org.size)，或者，如下所示，使用 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>