请看this jsfiddle .在 html 中我有...
<div class='block1'>
<p>text</p>
<p>text2</p>
<p>text 3</p>
<div class='block2'>block2</div>
<div class='block3'>
<p>block3</p>
<div class='block2'>block4</div>
</div>
</div>
在 CSS 中...
.block1 { 红色; 宽度:100px; 边框:2px 纯绿色; position:relative;
.block2 {
color: blue;
width: 70px;
border: 1px solid black;
position: absolute;
top: 10px;
left: 110px;
}
.block3 {
color: blue;
width: 100px;
border: 1px solid black;
position: absolute;
top: 35px;
left: 120px;
}
如您所见,div 位于 left
位置。因此,要放置一个 div,我需要获取其“父级”的宽度,添加间隙宽度,然后设置 left
属性。
是一样的(我的意思是放置一个 div
从它的“父”div 的右边界右边 10px)可以只用 CSS 完成而不用每个 javascript 更新 left
父 div 的宽度何时更改?
PS. 是的,我想过在 CSS 中使用 float
,但如您所见,我可以在“父”div 的右边界处有多个 div,并且有间隙div 之间可以不同。
最佳答案
将 left: 100%;
和 margin-left
设置为距离 .block1
右边缘的任意间距:
.block1 {
color: red;
width: 100px;
border: 2px solid green;
position: relative;
}
.block2 {
color: blue;
width: 70px;
border: 1px solid black;
position: absolute;
top: 10px;
left: 100%;
margin-left: 10px;
}
.block3 {
color: blue;
width: 100px;
border: 1px solid black;
position: absolute;
top: 35px;
left: 100%;
margin-left: 20px;
}
关于javascript - 将 div 绑定(bind)到另一个 div 的右边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34750799/