gpt4 book ai didi

html - 使用 HTML 和 CSS 三折

转载 作者:行者123 更新时间:2023-11-28 01:11:09 25 4
gpt4 key购买 nike

如何格式化您的 CSS,以便您可以打印呈现的 HTML 文档的 PDF(来自 Google Chrome)。

我的目标是有一个三折的传单。取一张标准纸,对折成三等份,然后在正面和背面打印。

每一列都需要保持相同的大小,即使内容超出了它。 (所以我不希望 DIV 增长...)

我正在像这样使用 CSS 表格...

.container
{
width:11in;
display: table;
table-layout:fixed;
padding:0;
margin:0;
}
.row
{
height:8.5in;
display: table-row;
padding:0;
margin:0;
}
.cell
{
position:relative;
display: table-cell;
padding: 20px;
}

有什么建议吗?上面的问题是,如果内容超出 DIV,它会垂直增加 DIV 的大小。

最佳答案

隐藏overflow-y并移除表格布局:

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

   .container {
width: 11in;
padding: 0;
margin: 0;
}
.row {
height: 8.5in;
display: inline-flex;
padding: 0;
margin: 0;
overflow-y: hidden;
max-height: 8.5in;
width: 100%;
}
.cell {
display: inline-block;
padding: 20px;
width: 33.33%;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.tall {
height: 900px;
}
<body>
<div class="container">
<div class="row">
<div class="cell">
foo
</div>
<div class="cell blue">
foo
<p class="tall red">bar</p>
<br />grill
</div>
<div class="cell">
foo
</div>
</div>
<div class="row">
<div class="cell">
foo
</div>
<div class="cell red">
bar
</div>
<div class="cell">
grill
</div>
</div>
</div>
</body>

关于html - 使用 HTML 和 CSS 三折,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37709863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com