php - 文章预览顶部 "Read more"链接的 CSS 定位

Question

我在将“阅读更多”类型的链接定位到我创建的文章预览 div 上方时遇到问题。

我在定义了 height 和 width 的 矩形框 中显示文章，并将其设置为 overflow:hidden。然后我添加了一个链接并给它一个z-index of +1, position:absolute, right:0 和 bottom 0。

我希望它能被推到 div 的右下角并覆盖文章文本的预览。不幸的是它正在消失。我假设它被放置在整篇文章的右下角，因此被隐藏了。尽我所能，我无法让我的大脑开始寻找解决方案。

这是我目前的代码。

.articlepreviewlayout{
height:200px;
width: 669px;
overflow: hidden;
border: 2px solid #ff6600;
margin: 10px;
}

.articlepreviewlayout img{
width: auto;
height: 200px;
}

.articlepreviewlayout a{
text-decoration: none;
color: #ff6600;
}

.articlepreviewlayout p{
font-size: 75%;
}

.articlepreviewlayout a.readmore{
color: #000000;
z-index: +1;
position: absolute;
right: 0;
bottom: 0;
}

和 html/php:

    <div class="articlepreviewlayout">
<?php
$result = mysql_query("SELECT * FROM articles WHERE title = 'Simple Ideas For Your Website Logo.'")
or die(mysql_error());  

$row = mysql_fetch_array( $result ); 

echo "<a class='readmore' href='".$row['link']."'>Read Full Article</a>";
echo "<img src='".$row['images']."' align='left' />";
echo "<h3><a href='".$row['link']."'>";
echo $row['title']."</a></h3>";
echo "<h6>Author: ".$row['author']."</h6>";
echo "<h6>Published:".$row['timestamp']."</h6>";
echo "<p>".$row['content']."</p>";
?>
</div><!-- articlepreviewlayout -->

我很感激任何帮助。我一直在疯狂地寻找解决方案，但以前没有人问过这个问题，或者我只是想不出合适的搜索词。谢谢。

Answer 1

我可能对您想要的东西感到困惑，但我创建了一个简单的 jsfiddle 来查看我是否正确。

http://jsfiddle.net/Lc2Es/1/

这里我有将#main 作为文章的 html，并且在#main div 的右下角有一个#readMore:

#main {
    position:relative;
    height:150px;
    width:300px;
    border:1px solid black;
    overflow:hidden;
}

#readMore {
    width:300px;
    text-align:right;
    position:absolute;
    bottom:0;
}


<div id="main">
    <div id="mainContent">
        There is the text that shows within the div.  I am writing content in the div so that it fills with content.  There is the text that shows within the div.  I am writing content in the div so that it fills with content.  There is the text that shows within the div.  I am writing content in the div so that it fills with content.  There is the text that shows within the div.
    </div>

    <div id="readMore">Read More</div>
</div>

显然，您必须使用 php 填写信息，但这是主要思想。如果这不是您想要的，请告诉我，以便我更好地了解您的需求。