0

My scenario here:

Inside the div which is mentioned below I need to add Find Out More link in right bottom of the div which should contain different bg-color in other words a box structure with an arrow image at the last.

.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*/
}

How It should look :

enter image description here

4

2 回答 2

2

你的意思是这样吗？这是一个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;
}

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

更新小提琴

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.*/
}

编辑 - 让盒子随着内容而增长

更新小提琴

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;
}
于 2013-04-11T11:19:08.557 回答
0

你的意思是这样的：

<div class="answerbox">
    <a href='#' class="findout">
        find out more..
    </a>
</div>

和

.findout
{
    position:relative;
    top:120px;
    left:20px;
    background-color:white;
    color:Red;
}

见小提琴

于 2013-04-11T11:18:55.250 回答