javascript - 将 div 绑定(bind)到另一个 div 的右边框

Question

请看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 之间可以不同。

Answer 1

将 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;
}