css - 如何在具有不同背景颜色的div中添加框？

Question

我的场景:

在下面提到的 div 中，我需要在 div 的右下角添加“查找更多”链接，该链接应包含不同的 bg-color，换句话说，最后一个带有箭头图像的框结构。

.answerbox
{
height: 150px; /*Specify Height*/
width:  150px; /*Specify Width*/
border: 1px solid black; /*Add 1px solid border, use any color you want*/
background-color: green; /*Add a background color to the box*/
text-align:center; /*Align the text to the center*/
}

它应该是什么样子:

Answer 1

你是说这样吗？这是一个 jsfiddle

通过将父级 (.answerbox) 设置为 position: relative，我可以将 .more 设置为 position :absolute 并将其放置在该框中我喜欢的任何位置；在本例中，容器的右下角。

HTML

<div class="answerbox">
    <a href="#" class="more">Find out more</a>
</div>

CSS

.answerbox {
    height: 150px; /*Specify Height*/
    width:  150px; /*Specify Width*/
    border: 1px solid black; /*Add 1px solid border, use any color you want*/
    background-color: green; /*Add a background color to the box*/
    text-align:center; /*Align the text to the center*/
    position: relative;
}
.more {
    background: red;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 10px;
    height: 30px;
}

编辑 - 如果您想要按钮上的箭头图像

Updated Fiddle

CSS

.more {
    background: url('http://dc390.4shared.com/img/AgV87Tvx/s7/arrow_small_right.png') no-repeat left center red;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 30px;
    padding: 0 10px 0 20px; /* Extra padding left to make room for the button */
    line-height: 30px; /* Used to center the text vertically. Use the same value as the height.*/
}

编辑——让盒子随内容增长

Updated Fiddle

CSS

.answerbox {
    width:  150px; /*Specify Width*/
    border: 1px solid black; /*Add 1px solid border, use any color you want*/
    background-color: green; /*Add a background color to the box*/
    text-align:center; /*Align the text to the center*/
    position: relative;
    padding: 10px 10px 40px;
}