分享角落的四张图片：替代HTML + CSS布局？

Question

我正在尝试使用公共角设置四个图像面板。图像是随机挑选的，通常有不同的尺寸。

我设法使用表格的相对单元格中的图片的绝对定位来获得正确的布局：

  table {
    width: 100%;
  }

  td {
    position: relative;
  }
  
  img {
    position: absolute;
  }
  
  .top img {
    bottom: 0; 
  }
  
  .bottom img {
    top: 0;
  }
    
  .left img {
    right: 0;
  }
 
  .right img {
    left: 0;
  }

<table>
  <tr>
    <td class="top left">
      <img src="http://placekitten.com/200/300"/>
    </td>
    <td class="top right">
      <img src="http://placekitten.com/300/300"/>
    </td>
  </tr>
  <tr>
    <td class="bottom left">
      <img src="http://placekitten.com/300/100"/>
    </td>
    <td class="bottom right">
      <img src="http://placekitten.com/200/200"/>
    </td>
  </tr>
</table>

但是由于绝对定位，td的高度为零。因此，我很难将整个表放在整个页面内的正确位置。

我想知道是否有其他方法可以实现这种布局？

Answer 1

尝试使用flexbox。 https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

        .Aligner {
            display: flex;
            align-items: center;
            justify-content: center;
        } 
        .Aligner-item {
            max-width: 50%;
        }
        .flex-item img{
            vertical-align:top;
        }

    <div class="Aligner"> 
        <div class="Aligner-item">
            <div class="flex-item">
                <img src="http://placekitten.com/200/300" />
                 <img src="http://placekitten.com/300/300" />
            </div>
        </div>
    </div>
    <div class="Aligner"> 
        <div class="Aligner-item">
            <div class="flex-item">
            <img src="http://placekitten.com/100/300" />
            <img src="http://placekitten.com/200/200" />
          </div>
        </div>
    </div>

Answer 2

让我们将其拆分成行，然后将其拆分为单元格以及所有借助于弹性框的文件。

＆＃13;

＆＃13;

.row
{
  display: flex;
}

.cell
{
  width: 50%;
  flex: 0 0 auto;
  display: flex;
  padding: 5px;
}

.move-left
{
  margin-right: auto;
}

.move-right
{
  margin-left: auto;
}

.move-bottom
{
  margin-top: auto;
}

.move-top
{
  margin-bottom: auto;
}

＆＃13;

<div class="row"> 
  <div class="cell">
    <img class="move-right move-bottom" src="http://placekitten.com/300/200"/>
  </div>
  <div class="cell">
    <img class="move-left move-bottom" src="http://placekitten.com/200/200"/>
  </div>
</div>
<div class="row"> 
  <div class="cell">
    <img class="move-right move-top" src="http://placekitten.com/100/300"/>
  </div>
  <div class="cell">
    <img class="move-left move-top" src="http://placekitten.com/400/200"/>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;