Question

有没有办法将div（#divA）粘贴到另一个在没有javascript的情况下在纯CSS中保留绝对位置的div（#divB）？

例如：

#divB {
    position: absolute;
    left: 100px;
}

我希望#divA附加到#divB的左侧，
如果我动态增加#divB左边......

更新：我的最终目标是管理其他div的位置，
基于中间div的位置（图中的div B）
坚持下去：

img http://www.sumoware.com/images/temp/xzpsxdkdnccotgoe.png

Answer 1

只需使用100%偏移量的绝对定位贴在原始人的两侧。

HTML：

<div id="a">
    <div id="b">
    </div>
    <div id="c">
    </div>
</div>

CSS：

div {
    position:absolute;
    height:50px;
    width:50px;
}
#a {
    left:100px;
    background:red;
}
#b {
    right:100%;
    background:blue;
}
#c {
    background:green;
    left:100%;
}

Will give you exactly what you want

Answer 2

制造绝对的东西会使它脱离正常的流程。块元素从其最近的定位祖先（即：固定，绝对或相对）元素获取其上下文。需要注意的另一件事是继承不需要的边距，填充和边框。话虽如此... 根据您的图表，您有一个包含元素，您应该使用它来将您的“元素”元素放置在您想要的位置。使用“container - ＆gt; subdivs = display：inline-block”可以动态添加任意数量的div。如果某些内容涵盖超过1个元素，则创建一个类或将其指向元素的子元素。如果它涉及1个元素，那么使用Id可能会更好。你现在可以绝对定位你想要的子并漂浮其他子... 此外，为了使空div显示为“show”，它们必须定位（或浮动）并具有尺寸。

        #container{position:relative;padding:0px;margin:0px;
        top:0px;left:400px;width:300px;height:105px;}
        #container div{display:inline-block;}
        .sub{width:100px;height:100px;padding:0;display:inline-block;}
        #subA{float:left;background-color:red;}
        #subB{position:absolute;left:100px;background-color:yellow;}
        #subC{float:right;background-color:green;}

<div id="container">
    <div id="subA" class="sub"></div>
    <div id="subB" class="sub"></div>
    <div id="subC" class="sub"></div>   
</div>

css - 将div添加到已经离开绝对位置的中央div

2 个答案: