当父div改变宽度时设置绝对位置

时间:2014-03-12 09:23:20

标签: html css angularjs

我在css中遇到绝对和相对定位问题。我有一个GUI,可以在其中查看文件夹,用户可以选择查看文件夹的列数,请参阅图片。在每个文件夹下,我有一个输入字段,用户可以在其中更改foldername,还有一个按钮来清除名称。

我希望明确的按钮始终位于文本字段中的确切位置,但随着列的宽度发生变化,我对按钮的绝对定位将不会按照我的意愿进行。

http://i.imgur.com/Sh0W40o.png - 六列,清除按钮正确定位。 http://i.imgur.com/EBYADqA.png - 三列,按钮未正确定位。

<div ng-class="colStyle" ng-repeat="folder in getFolders(currentFolder)">                               
    <input type="image" ng-src="{{folder.img}}" ng-click="enter(folder)"/>                              
    <div ng-show="showFont && editing" class="testing">
        <input type="text" ng-model="folder.name"/>                                     
        <img class="clearName" src="img/clear.png" ng-click='clearName($index, folder)'/>                               
    </div>                              
</div>

这是我查看文件夹及其文本字段的HTML。 class&#34; colStyle&#34;是一个responsivegridsystem.com,其中类变为&#34; col span_1_of_X&#34;,其中X是用户选择的列数。这定义了视图中有多少列设置了该div的宽度。

我认为这里的两个css课程是&#34;测试&#34;和&#34; clearName&#34;看起来像:

.testing{
    position: relative;
    margin: 0px;
    padding: 0px;
}
.clearName{
    position: absolute;
    left : 80%;
    top: 5px;
}

我的问题是80%,或者我所选择的任何百分比都只有很多列中的一个。

如何在清除按钮上设置一个位置,以便在列数改变时它始终位于文本字段内的相同位置?

1 个答案:

答案 0 :(得分:0)

为什么不从输入字段的右侧开始?

假设您想要从右侧放置5px的清除按钮,您可以使用以下样式:

.clearName{
 position: absolute;
 right: 5px;
 top: 5px;
}

这要求输入框使用外部div的全宽。

百分比的使用是动态的,因为它取决于外部div的宽度(100px =&gt; 80%=&gt; 20px和200px =&gt; 80%=&gt; 40px)。

如果您不想将输入字段设置为外部div(.testing)的宽度,则可以翻转该想法并将外部div(.testing)设置为输入字段的宽度。

为此您可以使用:

.testing {
  display: table;
  margin: auto;
}