-1

为了让这两个“立即阅读”按钮在每个 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

然后我将position: absolute; bottom: 10px;和添加left: 0;到您的 ID#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 回答
-1

我建议你使用style="position: absolute; left: {number}; top: {number};". 使用position: absolute;您可以将按钮放在您想要的位置。在这里，我通过一些编辑编写了您的代码。只需复制并粘贴它：

<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"  style="position: absolute; left: 20px; top: 190px;"  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" style="position: absolute; left: 290px; top: 190px;" class="buttonText">Read Now</a>
        </div>

    </td>
</tr>


</table>
于 2013-05-03T12:47:45.643 回答