[英]HTML side by side divs not filling full width
I have the following quick html test which is a simplified version of something I am trying to do. 我有以下快速的html测试,它是我尝试做的事情的简化版本。 What I am not sure about is why the "details" area (with red border doesn't line up on the right hand side with everything else. What am I doing wrong?
我不确定的是为什么“详细信息”区域(带有红色边框的区域未在右侧与其他所有区域对齐。我在做什么错了?
CSS: 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: 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>
Please see this jsFiddle . 请参阅此jsFiddle 。
It's all about border width. 这都是关于边框的宽度。
When you set no borders, but background color you get something like this http://jsfiddle.net/cRZbw/1/ where "Details" is correctly aligned with "Header". 当您不设置边框但设置背景色时,您会得到类似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%;
}
Might be you want to do this: http://jsfiddle.net/cRZbw/2/ Change div.footer's position to relative. 可能是您想这样做: http : //jsfiddle.net/cRZbw/2/将 div.footer的位置更改为相对。
Here is the code: 这是代码:
div.footer {
position:relative;
min-height:30mm;
border-style:solid;
border-width:medium;
border-color:Gray;
text-align:center;
width: 100%;
bottom: 0pt;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.