浮动和显示：内联块，在DomPDF中无法正常工作

Question

您好，开发人员在将HTML VIEW转换为PDF时遇到麻烦。我有多个表，我希望它并排显示，1行两列，所有表的宽度和高度相同，但是当我使用float时：left;表格未显示出来。

---

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;
}

[您好，开发人员在将HTM1转换为PDF时遇到麻烦。我有多个表，我希望它并排显示，1行两列，所有表的宽度和高度相同，但是当我使用float时：left;表格未显示出来。

Answer 1

我建议您不要将float一起用于布局样式，而要使用flex或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/