-1

これらの 2 つの [今すぐ読む] ボタンを各 div ボックスの同じ位置に配置するには、それらの上にある説明の長さに関係なく、何をする必要がありますか?

http://jsfiddle.net/ThaXt/

<table width="100%"  border="0" cellspacing="0" cellpadding="0">
<tr>
    <td colspan="2" height="51" valign="middle" style="background: url(../../images/playonline3.jpg)" ><h1>HEADING</h1></td>
</tr>
<tr>
    <td height="150" align="left" valign="top" class="body-text" style="padding:10px">

        <div class="box">
            <p class="box-title"><a href="http://LINK/">Title1</a></p>
            <p class="box-desc">This article explains bluffing in general and shows examples of good bluffing spots.</p>
            <a href="http://LINK" id="button4" class="buttonText">Read Now</a>
        </div>

    </td>

    <td height="150" align="left" valign="top" class="body-text" style="padding:10px">

        <div class="box">
            <p class="box-title"><a href="http://LINK">Double Barreling</a></p>
            <p class="box-desc">What is a double barrel and when do we use this strategy?</p>
            <a href="http://LINK" id="button4" class="buttonText">Read Now</a>
        </div>

    </td>
</tr>

</table>
4

2 に答える 2

3

http://jsfiddle.net/ThaXt/1/

を使用position: absolute;すると、ボタンが非常に特定のポイントにとどまるように指示でき、そこから移動することはありません。

position: relative;クラスに追加しました.box

次に、あなたのIDにposition: absolute; bottom: 10px;andを追加しましたleft: 0;#button4

.box {
    width: 250px;
    height: 137px;
    position: relative;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #BEBEBE;
    background-color: #F6F6F6;
    color: #990000;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 20px;
}

#button4 {
    background: #5c5c5c;
    position: absolute;
    bottom: 10px;
    left: 0;
/* ... your other styles below ... */
}
于 2013-05-03T12:45:26.723 に答える