Question

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

然而，在主要内容部分，我有一个重复的图像，有时在图像的中途切断，看起来不对，有没有人有任何关于如何在Photoshop或CSS中解决这个问题的想法？

我必须垂直保持液体布局，固定宽度，但我希望它看起来像一个笔记本，而不是切出来看起来没用。

以下是该网站的示例，感谢：

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

Answer 1

您的示例网址对我来说很好，但我想我知道您在谈论什么。我认为，你需要做的是将notebookContent div强制到一个高度，这个高度是binder-spine图像高度的下一个倍数。在jQuery中，它类似于：

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

Answer 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

Div Layout - 重复图像帮助

2 个答案: