求助：基于数组实现适配DOMPDF的动态双列布局（替代column-count）

Hey there! I’ve dealt with this exact DOMPDF column-count headache before—total bummer when that property doesn’t play nice. Let me share two reliable solutions that work for dynamic two-column layouts, with automatic height adjustment, since you can’t use column-count. Both options let you loop through your content array and render it cleanly, and they’re fully compatible with DOMPDF.

Option 1: HTML Table (Best Compatibility) #

Tables are rock-solid in DOMPDF, even older versions. The trick is splitting your content array into two roughly equal halves, then rendering each half in a table column. This ensures columns stay aligned and adjust height automatically based on content.

Example Code (PHP/HTML): #

<style>
.two-column-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}
.two-column-table td {
  width: 50%;
  vertical-align: top; /* Align content to the top of each column */
  padding: 10px;
  box-sizing: border-box;
}
.item {
  margin-bottom: 15px;
  word-wrap: break-word; /* Prevent long text from overflowing */
}
</style>

<table class="two-column-table">
  <tr>
    <!-- Left Column -->
    <td>
      <?php
      // Your content array
      $contentArray = ["Item 1", "Item 2 with longer content that wraps automatically", "Item 3", "Item 4"];
      $midpoint = ceil(count($contentArray) / 2);
      $leftItems = array_slice($contentArray, 0, $midpoint);
      
      foreach ($leftItems as $item):
      ?>
        <div class="item"><?php echo $item; ?></div>
      <?php endforeach; ?>
    </td>

    <!-- Right Column -->
    <td>
      <?php
      $rightItems = array_slice($contentArray, $midpoint);
      foreach ($rightItems as $item):
      ?>
        <div class="item"><?php echo $item; ?></div>
      <?php endforeach; ?>
    </td>
  </tr>
</table>

Why this works: #

• Tables force equal column widths (50% each) and automatically adjust column height to match the tallest content in either column.
• vertical-align: top ensures content starts at the top of each column, no weird spacing gaps.
• word-wrap: break-word prevents long text from spilling outside the column.

Option 2: Flexbox (Cleaner, Newer DOMPDF Versions) #

If you’re using DOMPDF 0.8.0 or later, flexbox support is pretty solid. This approach avoids splitting the array—just loop through all items, and flexbox will automatically arrange them into two columns, wrapping as needed.

Example Code (PHP/HTML): #

<style>
.two-column-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}
.flex-item {
  flex-basis: 50%; /* Each item takes half the container width */
  padding: 10px;
  box-sizing: border-box;
  word-wrap: break-word;
}
</style>

<div class="two-column-flex">
  <?php
  $contentArray = ["Item 1", "Item 2 with longer content that wraps automatically", "Item 3", "Item 4"];
  foreach ($contentArray as $item):
  ?>
    <div class="flex-item"><?php echo $item; ?></div>
  <?php endforeach; ?>
</div>

Why this works: #

• No need to split the array—flexbox handles the column layout automatically.
• Items will wrap into a new row when they hit the 50% width limit.
• Each row’s items will automatically match the height of the tallest item in that row, keeping the layout clean.

Key Notes for DOMPDF: #

• Always test with your specific DOMPDF version—flexbox support improved significantly in 0.8.0+, so stick with tables if you’re on an older version.
• Add box-sizing: border-box to all column/item elements to ensure padding doesn’t break the 50% width.
• For very long content, both methods will automatically push the page content to the next page if needed—DOMPDF handles page breaks well with tables and flex containers.

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