0

ここでの私のシナリオ:

以下で説明する div 内で、div の右下に Find Out More リンクを追加する必要があります。このリンクには、異なる 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*/
}

どのように見えるか:

ここに画像の説明を入力

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 に答える