我目前正在建立我的投资组合网站。
我正在处理的页面可以在这里找到:http: //www.infomaticfilms.com/jack/jrimg/g_and_d.htm。
它远未完成,因为在我解决这个问题之前我不想继续前进。此页面将是所有各种项目页面的通用页面,这意味着它们都将具有不同的高度。我不想为每个项目制作单独的页面,我只想制作一个可供所有人使用的页面,只需每次删除内容并重新保存页面即可。如果您单击“我”或“联系人”链接,您可以看到其他页面以查看边框。我读了一篇来自 Stack Overflow 的文章,它帮助我非常接近解决方案。我对 Firefox 有疑问,它在右侧边框上增加了 1 个像素。这是HTML:
<div class="contentAndBorders">
<div class="borderLeft"></div>
<div class="mainContentProjectPage">
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
</div>
<div class="borderRight"></div>
</div>
我希望将内容放入带有 mainContentProjectPage 类的 div 中。我需要具有borderLeft 和borderRight 类的div 来扩展mainContentProjectPage 的高度,因此边框看起来是连续的,这就是他们目前所做的。它基本上是三列。第一列和第三列是左右的白色边框,中间列是内容。这是CSS:
.contentAndBorders {
width: 950px;
position: relative;
overflow: hidden;
}
.mainContentProjectPage {
float: left;
background-color: #F55816;
width: 100%;
padding-left: 24px;
}
.borderLeft {
float: left;
background-color: #FFF;
width: 1.3%;
background-attachment: scroll;
background-image: none;
background-repeat: repeat;
background-position: 0px 0px;
position: absolute;
left: 0px;
height: 100%;
margin: 0;
}
.borderRight {
background-attachment: scroll;
background-color: #FFF;
background-image: none;
background-repeat: repeat;
background-position: 0px 0px;
width: 1.3%;
float: left;
position: absolute;
right: 0px;
height: 100%;
margin: 0;
}
我真的不明白它是如何工作的,只是它确实如此。如果有人知道实现相同结果的更好方法,那么我将非常感激,因为这是我网站的最后一部分。我的问题是有谁知道如何摆脱 Firefox 右侧边框上多余的 1 个像素?它在 Safari 和 Chrome 中看起来很完美。任何帮助和建议都可以挽救生命。