Div 布局 - 重复图像帮助答案

【问题标题】：Div Layout - Repeating image helpDiv 布局 - 重复图像帮助
【发布时间】：2009-07-03 22:59:05
【问题描述】：

我正在尝试将我网站的主要内容部分包裹在这种笔记本风格的外观中。

但是，在主要内容部分，我有一个重复的图像，有时会在图像的中途切断并且看起来不正确，有人对如何在 Photoshop 或 CSS 中解决此问题有任何想法吗？

我必须保持垂直的流动布局，宽度固定，但是我希望它看起来像一个笔记本，而不是剪裁出来，看起来很垃圾。

这里是网站的例子，谢谢：

http://www.seth-duncan.com/Test/Notebook/notebook.html

【问题讨论】：

我访问了该页面，但图像看起来没有“截断”。可能是您面临特定于浏览器的问题。我使用的是 Firefox 3.0.10 在哪个浏览器中您看到图像被截断？此外，请考虑重置样式表以最大程度地减少跨浏览器的差异。
现在试试看。现在图像中有明显的中断。
我想我现在看到了。您的意思是“notebook-Content.png”图像与页面底部的“notebook-Bottom.png”图像“连接”的地方？嗯 - 以前没有解决过这类问题，抱歉 - 如果我有一些东西我会发布。

标签： css photoshop html liquid-layout

【解决方案1】：

您的示例网址在我看来不错，但我想我知道您在说什么。我认为你需要做的是将notebookContent div 强制到一个高度，该高度是活页夹脊柱图像高度的下一个倍数。在 jQuery 中，它会是这样的：

$(document).ready(function() {
    var height = $('#notebookContent').height();
    var offset = height % 24;
    if(offset)
        $('#notebookContent').css('min-height', height + 24 - offset);
});

【讨论】：

我认为它需要某种 javascript 解决方法，所以我期待这样的事情。它使用 jQuery 的事实是完美的，因为这是我选择的 javascript 库。非常感谢您的解决方案。 -赛斯
请小心使用 JS 的样式，因为如果它被禁用，所有东西都可能变成废墟。

【解决方案2】：

如果你想使用重复的图像作为背景，你应该使用

div {line-height: 24px; /* equal to the height of the image */
    }

然后所有其他图像（在您的情况下为content-Top.png 和content-Bottom.png）应该是该图像或线高度的倍数。我认为您遇到的问题是底部图像高 31px，顶部图像高 41px，重复图像高 24px。这些高度不会很好地融合。

Javascript 可以解决这个问题，但您可能会发现简单地编辑图像以使它们具有共同的高度会更容易。

我认为<br /> 等于一个行高，<p> 标签之间的填充/边距应该调整为等于行高的一个（或整数倍）以保留主题。

A List Apart 在这里有一篇关于这类事情的好文章：http://www.alistapart.com/articles/settingtypeontheweb。

另外，因为有时我无法阻止自己（啊，失眠，我的宿敌......），我为你拼凑了一个演示页面，页面上有 CSS供您阅读：http://www.davidrhysthomas.co.uk/so/notebook.html

【讨论】：