Question

如何格式化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的大小。

Answer 1

隐藏溢出y并删除表格布局：

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

＆＃13;

   .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;
}

＆＃13;

<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>

＆＃13;

三维使用HTML和CSS

1 个答案: