Laravel-Dompdf布局问题：如何实现Div的Flex式列布局展示

我来帮你搞定这个PDF布局的坑！你现在遇到的主内容随侧边栏下移的情况，核心问题是当前布局属性没适配PDF渲染的特性，而且还有一些HTML结构和CSS写法的小问题，咱们一步步调整就能解决：

问题分析 #

你之前尝试的flex、table属性没生效，大概率是因为：

1. .wrapper用了display: table但子元素没对应设置表格单元格属性，PDF渲染对这种不完整的表格布局支持很差；
2. 侧边栏用position: relative + left的定位方式，很容易在PDF渲染时触发布局错位；
3. HTML里存在<p>嵌套<h4>的不规范写法，会被渲染器自动修正，间接导致布局混乱。

具体解决方案 #

1. 改用Flexbox布局（PDF渲染器普遍支持）

把.wrapper改成flex布局，同时设置align-items: flex-start让两个子元素顶部对齐，彻底解决主内容下移的问题：

.wrapper {
  position: relative;
  width: 21cm;
  display: flex;
  align-items: flex-start; /* 关键：让侧边栏和主内容从顶部开始排列 */
  margin: 0 auto; /* 可选：让内容在页面居中 */
}

2. 修正侧边栏定位方式

移除position: relative和left，用margin-left保留你需要的左侧间距，更符合flex布局的逻辑：

.sidebar {
  width: 5cm;
  margin-left: 0.9cm; /* 替代原来的left定位，更稳定 */
}

3. 规范HTML结构

把嵌套的<p>标签换成<div>，避免浏览器/PDF渲染器自动修正结构导致布局错位：

完整修改后的Blade代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,500,700&display=swap" rel="stylesheet">
  <style media="screen">
    @font-face {font-family: "Roboto-Light"; font-style: normal; font-weight: 300; src: url({{ url('fonts/Roboto-Light.ttf') }})}
    @font-face {font-family: "Roboto-Regular"; font-style: normal; font-weight: normal; src: url({{ url('fonts/Roboto-Regular.ttf') }})}
    @font-face {font-family: "Roboto-Bold"; font-style: normal; font-weight: bold; src: url({{ url('fonts/Roboto-Bold.ttf') }})}
    
    body {
      font-family: 'Roboto-Regular';
      background: url({{ url('pdf-export-background.png') }});
      background-size: 100% 100%;
      padding-top: 3cm;
      padding-bottom: 100px;
      margin: 0;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box; /* 避免padding/margin撑宽容器 */
    }
    
    .wrapper {
      position: relative;
      width: 21cm;
      display: flex;
      align-items: flex-start;
      margin: 0 auto;
    }
    
    .sidebar {
      width: 5cm;
      margin-left: 0.9cm;
    }
    
    .main-content {
      width: 5.7cm;
      margin-left: 1cm; /* 可选：给主内容加左侧间距 */
    }
    
    .page-break-after {
      page-break-after: auto;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="sidebar">
      <p style="text-align:center;font-size:8px;">{{ $meeting['place'] }}</p>
      <!-- List Item -->
      <div style="margin-top: 15px;">
        <h4 style="margin-left:5%;font-family:'Roboto-Bold' !important;font-size:10px;">
          <span style="border-bottom: 1px solid #000;">Düzenleyen</span>
        </h4>
        <p style="padding-left: 5%;">
          <span style="font-size:9px;">{{ $meeting['created_user']['name'] }}</span><br>
          <span style="font-size:7px;font-weight:300;line-height:9px;">{{ $meeting['job_title_name'] }}</span>
        </p>
      </div>
      <!--#List Item -->
    </div>
    <div class="main-content">
      THE MAIN CONTENT
    </div>
  </div>
</body>
</html>

额外注意事项 #

如果你的PDF生成工具（比如dompdf）对flex支持还是有问题，可以尝试替代方案：给侧边栏和主内容设置display: inline-block + vertical-align: top，同样能实现顶部对齐的列布局：

.sidebar, .main-content {
  display: inline-block;
  vertical-align: top;
}

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