html - 隐藏 2 列中的溢出部分

Question

我有 3 张图像，我想将它们排列成 2 列，一列用于 1 张图像，另一列用于 2 张图像。问题是 2 列的高度不同。我想隐藏较高列的溢出部分。下图显示了这一点。

这是我的 HTML:

.row:before,
.row:after {
  content: "";
  display: table;
}

.row:after {
  clear: both;
}

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}

.section-features img {
  width: 100%;
}

.section-features .span-1-of-3 {
  width: 33.3%;
  padding-left: 5px;
  padding-top: 5px;
  padding-right: 5px;
}

.section-features .span-2-of-3 {
  width: 66.6%;
  padding-top: 5px;
  padding-left: 5px;
}

<section class="section-features">
  <div class="row">
    <div class="col span-2-of-3">
      <a href="#"><img src="resources/img/modern-brownstone.jpeg" alt="Mordern Brownstone Picture"></a>
    </div>
    <div class="col span-1-of-3">
      <div class="row">
        <a href="#"><img src="resources/img/intimate-setting.jpg" alt="An Intimate Setting"></a>
      </div>
      <div class="row">
        <a href="#"><img src="resources/img/edgy-classic.jpg" alt="Edge Classic"></a>
      </div>
    </div>
  </div>
</section>

Answer 1

所以你可以做的是给你的部分一个 max-height 并设置 overflow:hidden 就可以了。下面是相同的演示。

section {
  max-height: 400px;
  overflow: hidden;
}

.img1 {
  height: 500px;
  background-color: red;
  display: inline-block;
  width: 200px;
  float: left;
}

.container {
  width: 200px;
}

.img2 {
  height: 200px;
  background-color: blue;
  display: inline-block;
  width: 200px;
  float: left;
}
 div {
 margin:5px;
}
.img3 {
  height: 200px;
  background-color: grey;
  display: inline-block;
  width: 200px;
  float: left;
}

<section>
  <div class="img1">

  </div>
  <div class="conatiner">
    <div class="img2">

    </div>
    <div class="img3">

    </div>
  </div>

</section>

希望这有帮助:)