如何定位元素在DIV内的固定位置 - How to position element in a fixed position inside DIV

How to position element in a fixed position inside DIV

本文关键字：定位 DIV 位置元素何定位 | 更新日期: 2023-09-27

无论上面的描述有多长，我需要做些什么才能在每个div框中有这两个"Read Now"按钮在相同的位置?

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>

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

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