css - 左/右页依赖格式

问题描述

我试图找到一种方法来浮动左侧页面上的某些项目，以及右侧和右侧页面。不知道去哪里看，因为我能找到的似乎相关的是@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>

但是我如何指示浏览器这样做呢？

NB 至少在 2001 年，“Complete Idiots Guide”系列书籍使用这种奇数/偶数依赖浮点数作为标题为“学习链接”的侧边栏（可能还有其他类似的侧边栏）。所以这种风格要求是有先例的，尽管我并不想用 HTML 复制他们的书！

标签： css

这是您查询的解决方案

如果您按照下面的代码更改您的 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>

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

css - 左/右页依赖格式

问题描述

解决方案

推荐阅读