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

我在没有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的理解过于局限，无法以优雅的方式解决。

最佳答案

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

关于html - 在一页上排列非常大的图像和其他文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51927661/