Question

我试图将A4纸分成四个象限。然后将该HTML / CSS馈送到PD转换器。不知怎的，我无法让浮动的div对齐（形成象限）。

HTML

<div class="q q1">1</div>
<div class="q q2">2</div>
<div class="q34">34</div>

CSS

@page {
    size: A4;
    margin: 0;
    padding: 0;
}
body, div {
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}
.q {
    max-width: 50%; 
    max-height: 50%; 
    min-width: 50%; 
    min-height: 50%; 
    width: 50%; 
    height: 50%; 
    display:inline-block;
    border: 1px solid grey;
}
.q34 {
    max-width: 100%; 
    max-height: 50%; 
    min-width: 100%; 
    min-height: 50%; 
    width: 100%; 
    height: 50%; 
    display:inline-block; 
    border: 1px solid grey;
}

不知何故，第二象限和底部不想适合模型（即移动到下一行）

我的问题：如何将象限1和2放在1行（50/50）上？如何将下半部分放在第2行（50％高度/全宽）？

Answer 1

只需添加：

.q { float: left; }
.q34 { clear: both; }

html, body{
    height: 100%;
}

http://jsfiddle.net/Niffler/F5AWC/

CSS - 使用DIV在四个象限中划分A4进行打印

1 个答案: