将一系列 p 流制作成“两页跨页”

发布于 2024-09-28 06:34:59 字数 378 浏览 1 评论 0原文

最近，一个学生偶然得到了这个（或者是错误的 xhtml/css 的副作用）。这是否可以通过跨浏览器、自动的方式（比如 Wordpress 文章和自定义 html/css）来完成？（即，没有 php 脚本之类的。）

我的一个目标是创建一个读起来“像一本书”而不是卷轴的网站。

有想法吗？

编辑：我应该明确目标。就是用f.ex写一篇带图片的文字。 TinyMCE 等，并呈现其排版和布局质量以及经典技术杂志（例如早期 BYTE 跨页或科学对开本）的“概览性”。如果没有 CSS 技巧可以自动处理溢出，我会接受 php 解决方案。我想要“摆脱”的是手动将 5 页文章分成几栏的需要。

也许 LyX 可以生成像样的 HTML，每 2 页跨页 1 个文件？这将是一个可以接受的解决方案。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

要走干脆点 2024-10-05 06:34:59

CSS 3 允许流动的“报纸栏”（如果这就是您的意思）。

http://www.w3.org/TR/css3-multicol/

最新至少基于 Gecko 和 Webkit 的浏览器支持它，但可能需要特定于供应商的前缀：

http://www.css3.info/preview/multi-column-layout/

回复收藏 0 原文

各自安好 2024-10-05 06:34:59

如果你使用这样的东西：

<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>

并给出以下样式：

p { float: left; }

它应该并排放置每个 P。然而，有多少个 P 并排取决于可用的宽度，因此，如果您定义每个 P 占 200px，并且容器中的总宽度为 400px，则最终结果将是两个 P 并排，像这样的东西：

text1 text2
text3 text4

请注意，如果 P 的内容长度不一样，这看起来不会那么好（或者工作得那么好）。如果您还需要将尺寸自动拆分为此类列，我认为仅使用 CSS 就没有一种巧妙的方法。

顺便说一句，我见过一些网站这样做。 这并不是一个好主意。它适用于纸张和杂志，但根据我的经验，在屏幕上效果不佳。除非我弄错了，否则也有一些研究得出了同样的结论。

If you use something like this:

<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>

And give the following style:

p { float: left; }

It should place each P side by side. However, how many P's go side by side depends on how much width is available, so if you define that each P take, say 200px, and the total width in the container is 400px, the end result would be two P's side by side, something like this:

text1 text2
text3 text4

Do note that this will not look so good (or work so well) if the contents of the P's aren't about the same length. I don't think there's a neat way of doing it just with CSS if you need the sizes to automatically split into such columns as well.

As a side note, I've seen some sites which do this. It's not really a that good idea. It works on paper and magazines, but not so well on screen in my experience. Unless I'm mistaken, there have also been some studies about this coming to the same conclusion.

回复收藏 0 原文