四张图片共享一个角落：替代 HTML+CSS 布局？答案

【问题标题】：Four pictures sharing a corner : alternative HTML+CSS layout?四张图片共享一个角落：替代 HTML+CSS 布局？
【发布时间】：2018-10-29 06:05:02
【问题描述】：

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

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

  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>

但是，tds 由于绝对定位，其高度为零。结果，我很难将整个表格放在整个页面内的正确位置。

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

【问题讨论】：

标签： html css image html-table

【解决方案1】：

试试弹性盒子。 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>

【讨论】：

谢谢。我会接受 CyberAP 的回答而不是您的回答，因为它在缩小浏览器窗口时具有更好的行为（正如运行 sn-p 时所见，在小型显示器上您的解决方案无法正确扩展，我什至认为它不起作用在我展开 sn-p 整页之前）。

【解决方案2】：

让我们将其拆分为行，然后在弹性框的帮助下拆分为单元格和所有内容。

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

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

【讨论】：