移动向文本中移动更多链接

当剩余文本显示时，阅读更多链接不会随文本本身而下降。移动向文本中移动更多链接

我试图position: relative;在“更多”链接，是<a href="#">Read More</a>但没有运气，因为<a href="#">Read More</a>不是<div="main">一个孩子，但它是<div id="sidebox">一个孩子，它是在一个单独的JavaScript文件太大。

如何让“阅读更多”链接随文本向下移动？

HTML文件：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <style> 
      #mainwrapper #sidebox {top:100px;right:2%;width:18%;position:absolute;direction:rtl;} 
      #mainwrapper #sidebox #main {top:80px;position:absolute;right:0%;left:0%;margin-left:auto;margin-right:auto;} 
      #mainwrapper #sidebox #title {font-weight:bold;font-size: 25px;color: rgba(74, 74, 74, 1.0);text-align: center;} 
      #mainwrapper #sidebox #sub {line-height: 30px;font-size: 16px;color: rgba(74, 74, 74, 1.0);text-align: justify;} 
      #mainwrapper #sidebox a {text-decoration:none;color:grey;font-size:20px;position:relative;top:300px;} 
     </style> 
    </head> 
    <body> 
     <div id="mainwrapper"> 
      <div id="sidebox"> 
       <div id="main"> 
        <p id="title">SOME TITLE</p> 
        <p id="sub">SOME LONG TEXT</p> 
       </div> 
      </div> 
     </div> 
    </body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="readmore.js"></script> 
<script>$('#main').readmore({speed: 500});</script>

在readmore.js部分代码：

var readmore = 'readmore', 
    defaults = { 
    speed: 100, 
    collapsedHeight: 200, 
    heightMargin: 16, 
    moreLink: '<a href="#">Read More</a>', 
    lessLink: '<a href="#">Close</a>', 
    embedCSS: true, 
    blockCSS: 'display: block; width: 100%;', 
    startOpen: false, 
    // callbacks 
    blockProcessed: function() {}, 
    beforeToggle: function() {}, 
    afterToggle: function() {} 
    },

来源

2016-09-20 Sheperd

你能为相同的添加的jsfiddle请 –

只要“阅读更多”链接显示的文字后而且你还没有固定它（没有使用的位置：绝对），它应该向下移动。您可以尝试在更多链接的上方添加“

”。 –

@ PravinWaychal，不要没有为什么，但不在jsfiddle中工作，它在我的系统上运行 – Sheperd

看来#main的定位会导致一些问题，你的CSS改成这样：

#mainwrapper #sidebox {width:15%;direction:rtl;position:absolute;top:100px;right:2%;} 
    #mainwrapper #sidebox #title {font-weight:bold;font-size: 25px;color: rgba(74, 74, 74, 1.0);text-align: center;} 
    #mainwrapper #sidebox #sub {line-height: 30px;font-size: 16px;color: rgba(74, 74, 74, 1.0);text-align: justify;} 
    a {text-decoration:none;color:navy;font-size:20px;}

来源

2016-09-20 10:01:11 Serjio

这可能是由于您没有添加CSS试试下面，检查的jsfiddle链接以及

#main{ 
    max-height: 80px; /*change as per your context*/ 
    overflow: hidden; 
}

jsfiddle

来源

2016-09-20 09:50:23

移动向文本中移动更多链接

回答

相关问题