Question

我正在为没有CSS和JS框架的Laravel dompdf构建打印布局。

    <div id="content">
        <div id="plot">
            <img src="{{ $imgData }}" alt=""/>
        </div>
        <div class="info" id="itlm">Some text</div>
        <div class="info" id="dd">{{ $timestamp }}</div>
    </div>

我希望#plot及其包含的图像占据宽度的100％和页面高度的90％，并在水平方向居中。两个＃info-div都应占据剩余的10％的高度，并且两者的宽度都应为50％。

我的问题是我不能将所有内容放在第一页PDF中。附加文本与图像重叠或被推入空白页面。我正在将base64编码的PNG数据传递到控制器函数，该函数正在加载自定义打印布局并通过dompdf返回PDF。 PNG数据的宽度和高度非常大。

我的业余CSS看起来像这样：我经常更改它，所以很乱。

    @page {
        size: A3 landscape;
        margin-top: 0;
        margin-left: 0;
    }

    body {
        margin: 0;
        padding: 0;
    }

    #content {
        width: 100%;
        height: 100%;
    }

    #plot {
        display:block;
        width: 100%;
        height: 90%;
    }

    .info{
        display:block;
        float: left;
        width: 50%;
        height: 10%;
        font-family: Sans-Serif;
    }

    #itlm{
        text-align: left;
    }

    #dd{
        text-align: right;
    }

我认为我对CSS的了解太有限，无法以优雅的方式解决这个问题。

Answer 1

将max-width: 842px;和margin: 0 auto;赋予您的#content。它将使图像居中，文本将在img下面。好的做法是将CSS *{border: 1px solid black};放入CSS（它将为您网站上的所有内容添加边框，您可以看到布局如何，并在完成网站操作后将其删除。希望如此）帮助了。

在一页上排列非常大的图像和其他文本

1 个答案: