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实心绿色; 位置：相对; }

.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我需要获得它的宽度＆＃34;父＆＃34;，添加间隙宽度然后设置left属性。

是相同的（我的意思是从它的右边界放置一个div 10px＆＃34; s＆＃34; parent＆＃34; div）只能在不更新left的情况下使用CSS完成每次更改父div的宽度时使用javascript？

PS。是的，我想过在CSS中使用float，但正如您所看到的，我可以在＆＃34; parent＆＃34;的右边界处设置几个div。 div和div之间的差距可能不同。

Answer 1

听起来你正在寻找left: 100%。

将right: -115px和right: -80px替换为left: 100%。在这样做时，您不需要对宽度进行硬编码，并且每个元素都位于左侧100%。这会将每个元素放在其定位的父元素的右侧：

＆＃13;

.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%;
}
.block3 {
  color: blue;
  width: 100px;
  border: 1px solid black;
  position: absolute;
  top: 35px;
  left: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

将div绑定到另一个div的右边界

2 个答案: