时间戳

首页 > 解决方案 > 浮动和显示：内联块，在 DomPDF 中不能正常工作

css - 浮动和显示：内联块，在 DomPDF 中不能正常工作

问题描述

开发人员您好，我在将 HTML VIEW 转换为 PDF 时遇到了麻烦。我有多个表格，我希望它并排显示，1 行两列，所有表格的宽度和高度都相同，但是当我使用浮点数时：左；表没有显示poperly。

I am tried DOMPDF_ENABLE_CSS_FLOAT true and Display:inline-block; and float:left; but didnt worked.
  my code.

    //Blade File
 @if(!$residents->isEmpty())
            @foreach($residents as $resident)
            <div><br>
                 <table border="1">
                    <tbody>
                        <tr>
                            <td width="10%" align="center" colspan="1" >
                                <img width="196px" height="209px"
                                src="{{($resident->images?env('CLOUD_FRONT_URL').'/residents/gallery/images/'.$resident->images :url('/images/no-image.jpg'))
                                }}">
                            </td>
                            <td width="40%" align="center" colspan="1">
                                <b>@if($resident->last_name){{$resident->last_name}}, @endif{{$resident->first_name}} <hr></b>

                                APT #{{$resident->room}} <hr>
                                @if($resident->birth_date != '-0001-11-30 00:00:00')
                                Age {{$resident->birth_date->age}} <hr>
                                @else
                                Age <hr>
                                @endif
                                @if ($resident->care_level == 'assisted_living')
                                ASSISTED LIVING
                                @elseif ($resident->care_level == 'transitional')
                                TRANSITIONAL
                                @elseif($resident->care_level == 'memory')
                                MEMORY
                                @endif
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>&nbsp;
            @endforeach
        @endif

// here is CSS

table {
    table-layout: auto;
    border-spacing: 2px;
    width: 49.9%;
    float:left;


    }

td {
    font-size: 15px;
}

您好，开发人员我在将 HTMl 转换为 PDF 时遇到了麻烦。我有多个表格，我希望它并排显示，1 行两列，所有表格的宽度和高度都相同，但是当我使用浮点数时：左；表没有显示poperly。

标签： csslaravel-5dompdf

解决方案

我建议你不要float一起使用所有的布局样式和使用flexor grid。

网格 POC：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 10px;
}

.table {
  display: grid;
  grid-template-columns: 80px auto;
  grid-template-rows: repeat(4, 20px);
  border: solid 1px;
}

.img {
  background: blue;
  grid-row: 1 / 5;
}

.row:not(:last-child) {
  border-bottom: solid 1px grey;
}

.row {
  text-align: center;
}
<div class="container">
  <div class="table">
    <div class="img"></div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
  </div>
  <div class="table">
    <div class="img"></div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
  </div>
  <div class="table">
    <div class="img"></div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
  </div>
  <div class="table">
    <div class="img"></div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
    <div class="row">text</div>
  </div>
</div>

有关网格的更多信息：https ://css-tricks.com/snippets/css/complete-guide-grid/

推荐阅读