html – 在不使用固定的情况下定位按钮

2024年1月8日 239次阅读

我在div main里面有一个div内容. content包含一个表,其内容将从数据库加载.因此表的宽度可能不同.

在表格的第二列下面,我想放置一个按钮.因此按钮的位置应自动调整.

目前,我用固定位置解决了它,但我想避免使用固定,因为列宽可能会改变.此外,布局不会以这种方式“负责”.

这是我的方法：

<style>
    div{
        border: 1px solid;
    }
    #main{
        height: 500px;
    }
    #content{
        overflow: auto;
        height: 200px;
    }
    table, tr, td{
        border: 1px solid;
    }
    button{
        position: fixed;
        left: 80px;
    }
</style>
<div id="main">
    <div id="content">
        <table>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
            <tr><td>Column 1</td><td>Column 2</td></tr>
        </table>
    </div>
    <button>OK</button>
</div>

这是它的样子：

《html – 在不使用固定的情况下定位按钮》

这是https://jsfiddle.net/p58d731e/1/

有没有更好的办法？

最佳答案 你可以使用jQuery并制作这样的东西

JSFiddle

var position = $( ".column2" ).position();
$("button").css("left", position.left);

因此左侧位置将始终是第二列开始的位置,即使左侧列更宽.像here.

点赞