Question

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

我在＆＃34上尝试position: relative;;阅读更多＆＃34};链接<a href="#">Read More</a>但没有运气，因为<a href="#">Read More</a>不是<div="main">的孩子，但它是<div id="sidebox">的孩子，并且它也在一个单独的javascript文件中。

如何让＆＃34;阅读更多＆＃34;链接向下移动文本？

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() {}
  },

Answer 1

似乎#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;}

Answer 2

这可能是因为你没有在下面添加CSS试试并检查jsfiddle链接

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

jsfiddle

使用文本向下移动阅读更多链接

2 个答案: