Question

我需要做什么才能将这两个“立即读取”按钮放在每个div框的相同位置，无论它们上面的描述有多长？

<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>

Answer 1

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

Answer 2

我建议您使用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>

如何将元素定位在DIV内的固定位置

2 个答案: