A4论文类两列CSS，带有jQuery引文格式

Question

我正在尝试基于这篇PhD论文实现以下布局

​

​

到目前为止，我只使用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

是的，您可以在这里看到一个工作示例，小提琴。你可以调整以满足你的需要。

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