Question

我有以下快速html测试，这是我想要做的事情的简化版本。我不确定的是为什么“细节”区域（红色边框没有与其他所有东西排成一行。我做错了什么？

CSS：

.landscapepage {
    position:relative;
    width: 280mm;
    height: 190mm;
    page-break-after: always;
}

div.header {
    position:relative;
    min-height: 30mm;
    width: 100%;
    border-style:solid;
    border-width: medium;
    border-color:Gray;
    text-align:center;
}

div.footer {
    position:absolute;
    min-height:30mm;
    border-style:solid;
    border-width:medium;
    border-color:Gray;
    text-align:center;
    width: 100%;
    bottom: 0pt;
}

div.summary {
    position:relative;
    width: 80mm;
    min-height: 20mm;
    display:table-cell;
    border-style:solid;
    border-width:medium;
    border-color:Navy;
}

div.details {
    position:relative;
    display:table-cell;
    border-style:solid;
    border-width:medium;
    border-color:Red;
    min-height:20mm;
    width:100%;
}

HTML：

<div class="landscapepage">
    <div class="header">
        Header
    </div>
    <div class="summary">
        Summary
    </div>
    <div class="details">
        Details
    </div>
    <div class="footer">
        Footer
    </div>
</div>

请参阅this jsFiddle。

Answer 1

这都与边框宽度有关。

当您设置无边框但背景颜色时，您会得到类似http://jsfiddle.net/cRZbw/1/的内容，其中“详细信息”与“标题”正确对齐。

div.header {
    position:relative;
    min-height: 30mm;
    width: 100%;
    background:gray;
    text-align:center;    
    border:1px solid red;
}

div.footer {
    position:absolute;
    min-height:30mm;
    background:gray;
    text-align:center;
    width: 100%;
    bottom: 0pt;
}

div.summary {
    position:relative;
    width: 80mm;
    min-height: 20mm;
    display:table-cell;
    background:navy;
}

div.details {
    position:relative;
    display:table-cell;
    background:red;
    min-height:20mm;
    width:100%;
}

Answer 2

你可能想要这样做：http://jsfiddle.net/cRZbw/2/ 将div.footer的位置更改为相对位置。

以下是代码：

div.footer {
    position:relative;
    min-height:30mm;
    border-style:solid;
    border-width:medium;
    border-color:Gray;
    text-align:center;
    width: 100%;
    bottom: 0pt;
}

HTML并排div不填充全宽

2 个答案: