CSS - 使用 DIV 将 A4 分成四个象限进行打印

Question

我想把一张 A4 纸分成四个象限。然后将此 HTML/CSS 馈送到 PD 转换器。不知何故我无法让 float 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 放在一条线上 (50/50)？如何将下半部分放在第 2 行(50% 高/全宽)？

Answer 1

只需添加:

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

html, body{
    height: 100%;
}

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