Question

有没有办法垂直对齐在段落中声明的跨度，并将跨度的顶部与段落的顶部对齐？

<p> lots of text <span data-pullquote="special text">special text</span></p>

更好地摆弄https://jsfiddle.net/HeavyThumper/e4e01p0h/

这是否可以在不改变段落样式的情况下 - 或者需要另一个容器？</ p>

Answer 1

更新

就CSS而言，有一些方法可以将pullquotes移动到段落的顶部，遗憾的是，position，transform:translate等属性将pullquote从流中移出，从而禁用float属性。结果是pullquote在顶部移动，但也混合到文本中而不是在文本周围流动的文本。 padding-bottom无法正常工作，因为它会破坏pullquote下面的文字。我能想到的唯一解决方案是需要最少的准备和工作就是使用JavaScript。

将以下内容添加到JavaScript的末尾：

var pq = document.querySelectorAll('span[data-pullquote]');
var pqArray = Array.prototype.slice.call(pq);
for (var i = 0; i < pqArray.length; i++) {
  var para = pqArray[i].parentElement;
  var pqHTML = pqArray[i].outerHTML;
  para.removeChild(pqArray[i]);
  para.insertAdjacentHTML('beforebegin', pqHTML);
}

这是一个有效的演示：

FIDDLE

<小时/>

OLD

看起来像这样吗？ https://jsfiddle.net/zer00ne/rzeqo7qz/ 我将<span>移到了顶部并为语义设置了<q>，但<blockquote>可能会更好。

使用span :: before，段落内的跨度是否可以垂直定位在该段落中？

1 个答案:

更新

OLD