html - A4 论文样 CSS : taking citations from the main column and placing them into the other

Question

我正在尝试根据 this PhD thesis 实现以下布局:

但是有没有一种纯 CSS 方法可以从一列中取出 HTML 引用并将它们排在另一列中？

.Grid {
  display: flex;
}

.Grid-cell {
  border: 1px solid black;
}

.Grid-cell:nth-of-type(1) {
  flex: 1 1 70%;
}

.Grid-cell:nth-of-type(2) {
  flex: 1 1 30%;
  padding-left: 20px;
}

q {
  /* Insert here */
}

<div class="Grid">
  <div class="Grid-cell">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi <q cite="http://www.mashable.com/">nesciunt</q>. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
      velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
      autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
  <div class="Grid-cell"><!-- Insert here --></div>
</div>

Answer 1

我认为您可能有点想多了。您不需要将其设置为 flex 布局，也不需要将元素从一个位置复制到另一个位置。您真正需要做的就是将 q 元素打断并在预定义的边距中显示它。我们可以只使用 padding-right 和 position: absolute 来做到这一点。

这里的例子:

.Grid {
  padding-right: 30%;
}

.Grid-cell {
  border: 1px solid black;
}

q[cite] {
  position: absolute;
  left: 75%;
  max-width: 20%;
}

q[cite]:before {
  content: attr(data-index);
}

<div class="Grid">
  <div class="Grid-cell">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi<sup>1</sup> <q data-index="1. " cite="http://www.mashable.com/">nesciunt</q>. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
      velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis
      autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

如果您没有在绝对定位的元素上定义 top 或 bottom 属性，它们将根据它们在文档流中出现的位置来确定它们的着陆位置。因此，通过仅设置 position: absolute 和 left: 75%，我们将您的引文分解，使其与其来源保持一致，并使用 data-index 属性与 content: attr(data-index); 相结合，甚至让您能够对引文进行编号以匹配其内联来源。