css - Div 布局 - 重复图像帮助

Question

我试图让我的网站的主要内容部分包含在这种笔记本风格的外观中。

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

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

这是带有发生情况示例的站点，谢谢：

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

Answer 1

如果要使用重复图像作为背景，则应使用

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

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

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

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

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

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

Answer 2

您的示例 URL 对我来说看起来不错，但我想我知道您在说什么。我认为，您需要做的是将notebookContentdiv 强制到一个高度，该高度是 binder-spine 图像高度的下一个倍数。在 jQuery 中，它会是这样的：

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