Question

我遇到问题定位＆＃34; 了解更多＆＃34;我创建的文章预览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

DIV容器位置必须是相对的;

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

Answer 2

我可能会对你想要的东西感到困惑，但我创造了一个简单的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填写信息，但这是主要的想法。如果这不是您想要的，请告诉我，以便我能更好地了解您的需求。

CSS在文章预览之上定位“阅读更多”链接

2 个答案: