如何设计包含3个1:1正方形与1个占剩余高度矩形的HTML页面

Hey there! 我看你想要实现左边一个大矩形、右侧三个正方形的布局，现在遇到了矩形高度没法适配剩余空间的问题。这主要是因为你的父容器没有设置明确的高度，导致百分比高度的计算没有参考基准，而且浮动布局本身在垂直对齐和高度适配上就比较麻烦。下面给你两种简单可靠的解决方案：

方法一：使用CSS Grid布局（推荐） #

Grid是专门用来处理二维布局的，非常适合这种左右分栏、右侧多行排列的场景，代码简洁还不容易出问题。

首先给父容器设置grid布局，划分好列和行：

<div style="display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 100vh;">
  <!-- 左侧大矩形 -->
  <div style="grid-row: 1 / span 2; position: relative;">
    <img style="object-fit: cover; width: 100%; height: 100%; position: absolute;" src="imageURL1"/>
  </div>
  <!-- 右侧上方正方形 -->
  <div style="position: relative;">
    <img style="object-fit: cover; width: 100%; height: 100%; position: absolute;" src="imageURL1"/>
  </div>
  <!-- 右侧下方第一个正方形 -->
  <div style="position: relative;">
    <img style="object-fit: cover; width: 100%; height: 100%; position: absolute;" src="imageURL1"/>
  </div>
  <!-- 右侧下方第二个正方形 -->
  <div style="position: relative; grid-column: 2;">
    <img style="object-fit: cover; width: 100%; height: 100%; position: absolute;" src="imageURL1"/>
  </div>
</div>

关键说明： #

• grid-template-columns: 2fr 1fr：把容器分成两列，左侧宽度是右侧的2倍，你可以根据需求调整比例（比如1fr 1fr就是左右等宽）
• grid-template-rows: 1fr 1fr：把容器分成两行，每行高度相等
• grid-row: 1 / span 2：让左侧矩形跨两行，直接占满整个容器高度
• height: 100vh：让父容器占满视口高度，你也可以换成固定高度（比如600px）或者根据父元素调整
• gap: 2px：替代你原来的内边距，用来设置元素之间的间距，避免布局错乱

方法二：修复原浮动布局的问题 #

如果你坚持用浮动布局，需要给父容器设置明确的高度，并且调整矩形的高度计算方式：

<div style="height: 100vh; overflow: hidden;">
  <!-- 左侧矩形 -->
  <div style="width: calc(100% - 100%/3); height: 100%; float: left; position: relative;">
    <img style="object-fit: cover; width: 100%; height: 100%; padding: 1px; position: absolute;" src="imageURL1"/>
  </div>
  <!-- 右侧三个正方形容器 -->
  <div style="width: 100%/3; float: left;">
    <!-- 右侧上方正方形 -->
    <div style="width: 100%; padding-bottom: 100%; position: relative; margin-bottom: 2px;">
      <img style="object-fit: cover; width: 100%; height: 100%; padding: 1px; position: absolute;" src="imageURL1"/>
    </div>
    <!-- 右侧下方第一个正方形 -->
    <div style="width: 50%; padding-bottom: 50%; float: left; position: relative; padding: 1px;">
      <img style="object-fit: cover; width: 100%; height: 100%; position: absolute;" src="imageURL1"/>
    </div>
    <!-- 右侧下方第二个正方形 -->
    <div style="width: 50%; padding-bottom: 50%; float: left; position: relative; padding: 1px;">
      <img style="object-fit: cover; width: 100%; height: 100%; position: absolute;" src="imageURL1"/>
    </div>
  </div>
</div>

关键修复点： #

• 给父容器设置height: 100vh（或固定高度），让子元素的百分比高度有明确的参考值
• 左侧矩形宽度改为calc(100% - 100%/3)，直接占满除右侧1/3宽度外的空间，高度设为100%，占满父容器高度
• 右侧用一个容器包裹三个正方形，下面两个正方形各占右侧容器宽度的50%，通过padding-bottom来保证正方形的比例

总的来说，Grid布局是更现代、更易维护的方案，推荐优先使用。如果需要兼容旧浏览器，再考虑浮动布局的修复方案。

内容的提问来源于stack exchange，提问作者Ali Abdulaal