浮动变化

Question

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

以下是我所拥有的几个屏幕

Image1

Image2

还有一些代码

    <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

中删除