A4 论文式 CSS：从主栏中引用并放入其他栏中

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

我觉得你可能有点想多了。您不需要将其设置为弹性布局，也不需要将元素从一个位置复制到另一个位置。您真正需要做的就是将 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); 即使您能够对引文进行编号以匹配其内联来源。

Answer 2

没有使用 flexbox。

但是使用内部 span 和定位是可以实现的。

顺便说一下，我使用 cite 标签代替了 q 标签，因为 q 呈现自动引号。可以使用 CSS 删除它们，但我没有研究过。

.Grid {
  display: flex;
}

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

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

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

sup {
  font-weight:bold;
  color: red;
  font-size:.6em;
}

cite span {
  position: absolute;
  right:0;
  margin-right: -8em;
  
}

<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><cite cite="http://www.mashable.com/"><span>1. My Citation</span></cite>. 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>

A4 论文式 CSS：从主栏中引用并放入其他栏中

A4 thesis-like CSS: taking citations from the main column and placing them into the other

html

css

typography

flexbox