DOMPDF：当左列内容超出时，右侧内容跳转到下一页

发布于 2025-01-15 10:00:26 字数 2165 浏览 2 评论 0原文

我在 PHP 中使用 DOMPDF 将 html 转换为 pdf。我有简单的 CSS 用于在 DOMPDF 中创建两列。但每当左栏内容增加时，右栏内容就会跳转到下一页。我尝试过使用分页 CSS 但没有得到结果。 https://i.sstatic.net/mTo1q.png

.container {
    display: block;
    width: 100%;
    height: auto;
}
.one {
    width: 50%;
    float: left;
    clear: left;
}
.two {
    width: 50%;
    float: right;
    clear: right;
}

<section class="container">
        <div class="one">
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
            </ul>
        </div>
        <div class="two">
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
            </ul>
        </div>
    </section>

原文

I'm using DOMPDF for html to pdf conversion in PHP. I've simple CSS for creating two columns in DOMPDF. But whenever content in left column increases, the content of right column jumps to next page. I've tried with page-break CSS but didn't get result. https://i.sstatic.net/mTo1q.png

.container {
    display: block;
    width: 100%;
    height: auto;
}
.one {
    width: 50%;
    float: left;
    clear: left;
}
.two {
    width: 50%;
    float: right;
    clear: right;
}

<section class="container">
        <div class="one">
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
            </ul>
        </div>
        <div class="two">
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod consequuntur voluptatibus corrupti? Laboriosam perspiciatis labore maxime ex, dolorum nisi nam, mollitia itaque, dolor quod vitae quisquam! Aperiam, quia ipsa?</li>
            </ul>
        </div>
    </section>

分享到QQ

分享到微博