html - 浮动变化

Question

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

这是我所拥有的几个屏幕

还有一些代码

    <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，您可以将按钮放置在角落，而无需再次从该位置移动。

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

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