如何用CSS实现第二列文本环绕第一列的超大元素？

核心需求 #

• 设计填字游戏布局，支持网页预览与打印解题
• 最终效果适配A4类纸张，网格需留有足够填写答案的空间

初始代码 #

<html>
      <head>
        <style>
           .block {
              width: 300px;
              height: 400px;
              -webkit-columns: 0 0;
              -webkit-column-gap: 10px;
              column-width: 140px;
           }
           table.xw {
              table-layout: fixed;
              background-color: lightblue;
              width: 200px;
              height: 200px;
              margin: 0 0 0 10px;
          }
          .clue {
             margin: 0 0 3px 10px;
             page-break-inside: avoid !important;
          }
    </style>
    </head>
    <body>
    <div class="block">
      <table class="xw">
         <tr><td>填字游戏网格区域</td></tr>
      </table>
    <h2>横向提示</h2>
    <div class="clue">1. 第一条横向提示</div>
    <div class="clue">2. 第二条横向提示</div>
    <div class="clue">3. 第三条横向提示</div>
    <h2>纵向提示</h2>
    <div class="clue">1. 第一条纵向提示</div>
    <div class="clue">2. 第二条纵向提示</div>
    <div class="clue">3. 第三条纵向提示</div>
    </body>
    </html>

设计思路 #

网格置于左上角，提示语从网格下方开始，以两列布局向下排列至网格右侧，网格下方的提示语使用完整列宽展示。

遇到的问题 #

1. 缩小网格适配列宽时，打印后方格过小，不便填写答案
2. 直接增大网格尺寸会导致整体布局错乱
3. 尝试Flex等布局方案，无法实现提示语环绕网格并延伸至下方宽列的效果
4. 需兼容Webkit内核（因使用Python的pdfkit.from_string()生成可打印PDF，同时发布网页）

现有解决方案（旧方法） #

通过手动添加cutout占位元素实现预期布局，但需要手动确定元素插入位置，代码如下：

<html>
      <head>
        <style>
           .block {
              width: 300px;
              height: 400px;
              -webkit-columns: 0 0;
              -webkit-column-gap: 10px;
              column-width: 140px;
           }
           table.xw {
              table-layout: fixed;
              background-color: lightblue;
              width: 200px;
              height: 200px;
              margin: 0 0 0 10px;
          }
          .cutout {
             width:200px;
             height: 200px;
             margin-left: -140px;
             float: left;
           }
          .clue {
             margin: 0 0 3px 10px;
             page-break-inside: avoid !important;
          }
    </style>
    </head>
    <body>
    <div class="block" style="clear:both">
      <table class="xw">
         <tr><td>填字游戏网格区域</td></tr>
      </table>
    <h2>横向提示</h2>
    <div class="clue">1. 第一条横向提示</div>
    <span class="cutout"></span>
    <div class="clue">2. 第二条横向提示</div>
    <div class="clue">3. 第三条横向提示</div>
    <h2>纵向提示</h2>
    <div class="clue">1. 第一条纵向提示</div>
    <div class="clue">2. 第二条纵向提示</div>
    <div class="clue">3. 第三条纵向提示</div>
    </body>
    </html>

寻求优化方向 #

希望找到比上述20年前旧方法更优的实现方式，无需手动插入占位元素，同时满足布局需求与Webkit兼容性。

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