javascript - 具有 jQuery 引用格式的 A4 论文式两列 CSS

Question

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

到目前为止，我只使用 CSS 来执行此操作，但是如果我有多个彼此靠近的引用，它就不会起作用，因为它们最终会在第二列中重叠。

但是用 jQuery 解决它的最佳方法是什么？到目前为止，这是我的计划:

1. 查看两个或多个引用是否具有相同的起始位置
2. 将它们复制到一个div中，删除原件
3. 移动div到引用开始位置
4. 相应地格式化 CSS

function setNewPositions() {
  var citation = $("cite span");
  
  citation.each(function() {
     console.log("Hello");
  });
}
setNewPositions();

.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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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> sequi<sup>2</sup> <q data-index="2. " cite="http://www.mashable.com/">nesciunt</q>      sequi<sup>3</sup> <q data-index="3. " 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>

Answer 1

是的，您可以在这里查看工作示例 jsfiddle .您可以根据自己的需要进行调整

HTML:

<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> sequi<sup>2</sup> <q data-index="2. " cite="http://www.mashable.com/">nesciunt</q> sequi<sup>3</sup> <q data-index="3. " 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>
<div class="cite"></div>

CSS:

.Grid {
  padding-right: 30%;
}

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

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

.cite a{
  display: block
}

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

JavaScript:

$(document).ready(function(){
    $('q[cite]').each(function(){
    $('.cite').append('<a href="'+$(this).attr('cite')+'">'+$(this).data('index')+$(this).text()+'</a>');
    $(this).hide();
  });
});