Question

我正在尝试找到一种方法来浮动左侧页面，右侧页面和右侧页面上的某些项目。不知道从哪里看，因为我能找到的所有相关内容都是@page：left /：right，但这似乎仅适用于页面框和边距，而不适用于页面内容。

这是我想做的事的一个例子；如果位于第1页，则第一个浮动框要向右移动；如果位于第2页，则第二个浮动框要向左移动；如果位于第3页，则要向右移动。

这些大框只是用来说明浮动内容之间可能有很多东西（尤其是未知数），我无法预测哪个页面可能包含浮动内容。（感谢克里斯蒂安做出的假设，我可以指出我的问题中未陈述的假设，并且可以进行此澄清的编辑。）

<!DOCTYPE HTML>
    <html>
      <head>
        <meta charset=utf-8>
        <title>float left or right</title>
        <link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
        <link href=/style.css type=text/css rel=stylesheet>
        <style>
          div { border: solid black 1px; }
          </style>
      </head>
      <body>
        <h1>float left or right</h1>
        <div style="page-break-inside: autor;">
          <div style="float: right;">
            float 1 content
          </div>
          page 1 content
          <div style="height: 8in; width: 1in;"></div>
          unknown amount of content between floats
          <div style="height: 8in; width: 1in;"></div>
          <div style="float: right;">
            float content somewhere later
          </div>
          <div>content winds up on page 2? 3? 4? 5?</div>
        </div>
      </body>
    </html>

但是我如何指示浏览器执行此操作？

至少在2001年，“完全白痴指南”系列丛书在标题为“学习链接”的侧边栏中使用了这种奇/偶相关的浮点数（也许还有其他此类侧边）。因此，尽管我没有尝试用HTML复制他们的书，但这种样式要求还是有先例的。

Answer 1

这是您查询的解决方案

如果您按照下面的代码更改html结构，然后应用以下CSS，那么您的查询将得到满足

.pages div:nth-child(odd) {
  text-align: right;
  clear: both;
}

<html>

<head>
  <meta charset=utf-8>
  <title>float left or right</title>
  <link href=favicon-index.ico type=image/x-icon rel="shortcut icon">
  <link href=/style.css type=text/css rel=stylesheet>
  <style>
    div {
      border: solid black 1px;
    }
  </style>
</head>

<body>
  <h1>float left or right</h1>
  <div class="pages">
    <div id="page-1">page 1 content</div>
    <div id="page-2">page 2 content</div>
    <div id="page-3">page 3 content</div>
  </div>
</body>

</html>

结构没有太大变化，但几乎与您提供的结构相似

取决于左/右页面的格式

1 个答案: