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

概述我在div main里面有一个div内容. content包含一个表,其内容将从数据库加载.因此表的宽度可能不同. 在表格的第二列下面,我想放置一个按钮.因此按钮的位置应自动调整. 目前,我用固定位置解决了它,但我想避免使用固定,因为列宽可能会改变.此外,布局不会以这种方式“负责”. 这是我的方法： <style> div{ border: 1px solid; } 我在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>

这是它的样子：

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

有没有更好的办法？

解决方法 你可以使用jquery并制作这样的东西

JSFiddle

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

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

总结

以上是内存溢出为你收集整理的html – 在不使用固定的情况下定位按钮全部内容，希望文章能够帮你解决html – 在不使用固定的情况下定位按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。