html - 类似于A4论文的CSS:从主栏中获取引文，然后将其放入另一个

我试图基于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>

最佳答案

我认为您可能对此有些想法。您无需将其设置为弹性布局，也无需将元素从一个位置复制到另一位置。您真正需要做的就是打破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);一起使用，即使您可以编号您的引文可以与其内联来源相匹配。

关于html - 类似于A4论文的CSS:从主栏中获取引文，然后将其放入另一个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45198708/