0

我目前正在建立我的投资组合网站。

我正在处理的页面可以在这里找到：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 中看起来很完美。任何帮助和建议都可以挽救生命。

上面代码的JSFiddle

4

2 回答 2

0

摆脱所有额外的与边框相关的代码（即，从您的标记和 css 中删除您的borderLeft 和borderRight div），只需将以下css 应用到您的projectPageWrapper div。

#projectPageWrapper { 
  border: 10px solid white;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}
于 2012-12-28T19:53:44.987 回答
0

它之所以起作用，是因为position应用于不同级别的元素的样式。这是有关该主题的更多信息。

包装元素.contentAndBorders像它的子元素一样扩展.mainContentProjectPage。正因为如此，100% 的高度（实际上并不像你想象的那样工作）绝对定位的侧面元素会扩展以填充垂直空间。

除非侧面的空间需要包含除实心填充以外的其他东西，否则这可能不是要走的路。相反，遵循盒子模型原则，并结合使用border-left和border-right结合padding来获得所需的外观和布局。

如果侧片需要图案填充或内容，那么您可以使用绝对定位的解决方案，但是您的大多数浮动都是不必要的，并且可能会导致更多的问题而不是它们的价值。

尝试：

.contentAndBorders {
      宽度：950 像素；
      位置：相对；
}
.mainContentProjectPage {
      背景颜色：#F55816；
      保证金：0 1.3%；
      填充：10px；
}
.borderLeft, .borderRight{
      背景颜色：#FFF；
      宽度：1.3%；
      位置：绝对；
      顶部：0px；
      高度：100%；/* 请注意，在非 webkit 浏览器中，这实际上可能表示父元素的 WIDTH */
}
.borderLeft {
      左：0px；
}
.borderRight {
      右：0px；
}

现在，因为浏览器并不总是知道当 1.3% 不分成偶数像素时该做什么，所以可能会有细微的差异。

于 2012-12-28T20:17:49.703 回答