如何在Marp/Marpit中创建全尺寸拉伸三柱
如何在Marp/Marpit中创建全尺寸拉伸三柱
提问于 2021-10-23 22:17:06
我在用marp/marpit制作幻灯片。我的目标是创建带有三个垂直列的幻灯片。我有一个CSS文件，我使用的HTML页面，也在marp。在web浏览器中，HTML页面被扩展到整个页面。但是在PDF查看器(由marp生成的文件)中，幻灯片从左/右、上/下有一些边框。
我正在使用的文件：
page.html
<!DOCTYPE html>
<html>
<!-- page.html -->
<head>
<!-- <link rel="stylesheet" href="css.css"> -->
<link rel="stylesheet" href="custom-theme.css">
</head>
<body>
<div class="container">
<!-- <div class="toppane">Test Page</div> -->
<div class="leftpane">
<h1>Left column</h1>
</div>
<div class="middlepane">
<h1>Middle column</h1>
</div>
<div class="rightpane">
<h1>Right column</h1>
</div>
</div>
</body>
</html>custom-theme.css
/* custom-theme.css */
/* @theme custom-theme */
@import 'default';
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 34%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
/* .toppane {
width: 100%;
height: 100px;
border-collapse: collapse;
background-color: #4da6ff;
} */---
marp: true
theme: custom-theme
---
**slide.md**
<!-- slide.md -->
<div class="container">
<!-- <div class="toppane">Test Page</div> -->
<div class="leftpane">
<h1>Left column</h1>
</div>
<div class="middlepane">
<h1>Middle column</h1>
</div>
<div class="rightpane">
<h1>Right column</h1>
</div>
</div>
<!-- https://stackoverflow.com/questions/36662712/how-do-i-divide-a-page-in-three-vertical-sections/36662828 -->用于生成PDF的代码：
marp --html --bespoke.progress --allow-local-files --theme-set custom-theme.css --pdf -- slide.md -o slide.pdfCSS用于并显示在浏览器中。
marp生成的PDF文件
如何在PDF中将列拉伸到完整的幻灯片大小？PS:为什么字体有不同的大小和颜色？
谢谢
回答 1
Stack Overflow用户
发布于 2022-08-22 05:52:52
使用此解决方案：https://github.com/orgs/marp-team/discussions/192
---
marp: true
style: @import url('https://unpkg.com/tailwindcss@^2/dist/utilities.min.css');
---
# Multi columns in Marp slide
<div class="grid grid-cols-2 gap-4">
<div>
## Column 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas eveniet, corporis commodi vitae accusamus obcaecati dolor corrupti eaque id numquam officia velit sapiente incidunt dolores provident laboriosam praesentium nobis culpa.
</div>
<div>
## Column 2
Tempore ad exercitationem necessitatibus nulla, optio distinctio illo non similique? Laborum dolor odio, ipsam incidunt corrupti quia nemo quo exercitationem adipisci quidem nesciunt deserunt repellendus inventore deleniti reprehenderit at earum.
</div>
</div>你应该可以把第二格改为第三格。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69692460
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号