html - float 变化

Question

我有图标，单击它会将新的 div(列)添加到 div 容器。问题是，当新的 div(列)出现时，按钮不会向右移动。是否可以以某种方式仅在 div 内添加 position:fixed？

这是我的几个屏幕

还有一些代码

    <div id="grid">
        <div id="add-col"></div>
        <div class="clear"></div>
        <div id="squares"></div>
    </div>


#grid{
    width:710px; 
    height: 470px;
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
    text-align:center;
    overflow: auto;
}

#add-col{
    margin:5px;
    float:right;
    background-image: url(images/table-add-column-icon.png);
    width: 32px;
    height: 32px;
    cursor: pointer;
}

Answer 1

你的 CSS 看起来像这样:

#grid{
    width:710px; 
    height: 470px;
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
    text-align:center;
    overflow: auto;

    position:relative; //added

}

#add-col{
    margin:5px;

    background-image: url(images/table-add-column-icon.png);
    width: 32px;
    height: 32px;
    cursor: pointer;

    position:absolute; //added
    top:5px; //added
    right:5px; //added

}

使用 absolute 位置，您可以将按钮放在 Angular 落，而无需再次从该位置移动。

要使用一个位置，您需要将 position:relative; 放置到它的父级，否则它会在页面周围飞来飞去。

注意 float 已从#add-col 中删除