将溢出部分隐藏在2列中

Question

我有3个图像，我想在2列中排列，1列为1张图像，另一列为2张图像。问题是2列有不同的高度。我想隐藏较高列的溢出部分。下图显示了这一点。

My picture arrangement

这是我的HTML：

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

我的CSS：

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

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>

希望这可以帮助 ：）

Answer 2

更改.span-2-of-3和.span-1-of-3类中的图像部分。不要将图像从100％分割，因为您添加了一些填充，因此减少了总宽度的填充。只是为了确定，在overflow: hidden;中添加.section-features img。

.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%;
  overflow: hidden;

}

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

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

<section class="section-features">
  <div class="row">
    <div class="col span-2-of-3">
      <a href="#"><img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="Mordern Brownstone Picture"></a>
    </div>
    <div class="col span-1-of-3">
      <div class="row">
        <a href="#"><img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="An Intimate Setting"></a>
      </div>
      <div class="row">
        <a href="#"><img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="Edge Classic"></a>
      </div>
    </div>
  </div>
</section>

Answer 3

.section-features .row {
    display: table;
    width: 100%;
}
.col {
    display: table-cell;
}
.col.span-2-of-3 {
    width: 70%;
    background-color: #f00;
}
.col.span-1-of-3 {
    width: 30%;
}
.col.span-1-of-3 .row {
    margin-bottom: 20px;
    background-color: yellow;
    height: 100px;
}
.col.span-1-of-3 .row:last-child {
    margin-bottom: 0px;
}

<section class="section-features">
        <div class="row">
            <div class="col span-2-of-3">
                <a href="#"></a>
            </div>
            <div class="col span-1-of-3">
                <div class="row">
                <a href="#"></a>
                </div>
                <div class="row">
                <a href="#"></a>
                </div>
            </div>
        </div>
    </section>