html - 为什么打印的时候图片在div外面？

Question

这是我的风格:

    <style>
    .floating-box {
        display: inline-block;
        width: 150px;
        height: 75px;
        margin: 10px;
        border: 3px solid #73AD21; 

    }
    img {
        width: 100%;
        height: 100%;
        max-height: 100%;
        max-width: 100%;
    }

</style>

My result

当我运行它时，如果只是以 HTML 显示它，结果很好，但是当我尝试使用 DOMPDF 打印时，结果是 div 中的图像，例如图像，你能帮帮我？

<div class="floating-box"><img src="{{url('img/bg2.jpg')}}" /></div>
<div class="floating-box"><img src="{{url('img/bg2.jpg')}}" /></div>
<div class="floating-box"><img src="{{url('img/bg2.jpg')}}" /></div>
<div class="floating-box"><img src="{{url('img/bg2.jpg')}}" /></div>

等等

Answer 1

仅使用物理尺寸(英寸、厘米、英尺等)，因为打印设备以英寸、厘米、英尺等测量内容。像素取决于您的显示器。