html - Four pictures sharing a corner : alternative HTML+CSS layout?

Question

I am trying to setup four image panels with a common corner. Images are randomly picked and often have different dimensions.

I managed to get a correct layout using absolute positioning of pictures inside relative cells of a table :

  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>

However tds have a zero height because of the absolute positioning. As a consequence, I struggle to place the whole table at the correct position inside the whole page.

I am wondering if there is another way to achieve this layout ?

标签： htmlcssimagehtml-table

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