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

Posted 2023-03-06

【中文标题】四张图片共享一个角落：替代 HTML+CSS 布局？

【英文标题】：Four pictures sharing a corner : alternative HTML+CSS layout?

【发布时间】：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 由于绝对定位，其高度为零。结果，我很难将整个表格放在整个页面内的正确位置。

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

【参考方案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>

【讨论】：

谢谢。我会接受 Cyber​​AP 的回答而不是您的回答，因为它在缩小浏览器窗口时具有更好的行为（正如运行 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>