Question

我想将一些元素放置在与父div的左边界不同的距离处。每个元素都有自己的距离（以父div的宽度的百分比表示）。

由于position似乎不是正确的方法，我尝试将元素浮动到右边

＆＃13;

div {
  display: flex;
  flex-direction: row;
}
#root {
  width: 50%;
  border: solid;
}
#one {
  float: right;
  margin-left: 20%;
}
#two {
  float: right;
  margin-left: 80%;
}

＆＃13;

<div id="root">
  <div id="one">1</div>
  <div id="two">2</div>
</div>

＆＃13;

我的期望是第一个元素将是div宽度的10％（因此页面宽度的5％，因为父div相对于页面的宽度为50％）并且第二个是80％。事实并非如此，docs提到

浮动元素后面的元素将围绕它流动。

他们还提到可以使用clear来避免这种情况，但是我没有设法让它发生（也就是说它是为了让每个浮点数从父{{1}的左边界重新计算出来}）。

这是可能的吗？

作为一种解决方法，我考虑计算第二个元素的浮点数相对于第一个元素，但这可能会使我的代码复杂化，因此可能有一个更清晰的解决方案。

（*）对于上面的情况，div（已经浮动的那些）= 80% - 20%。但即使在这里，定位也不正确（60%太多了;应该有20％的空白，2，40％空白，1，20％空白 - 但是还应考虑数字本身的宽度）

＆＃13;

div {
  display: flex;
  flex-direction: row;
}
#root {
  width: 50%;
  border: solid;
}
#one {
  float: right;
  margin-left: 20%;
}
#two {
  float: right;
  margin-left: 60%;
}

＆＃13;

Answer 1

您可以使用position: absolute在子元素上以您希望的方式定位元素。但请记住，子元素不控制外部元素的高度。

#root {
  position: relative;
  border: solid;
  width: 50%;
  overflow:hidden;
  height: 20px;
}
#one {
  border: solid red;
  position: absolute;
  top: 0px;
  left: 20%;
}
#two {
  border: solid blue;
  position: absolute;
  top: 0px;
  left: 60%;
}

<div id="root">
  <div id="one">1</div>
  <div id="two">2</div>
</div>

演示：https://jsfiddle.net/uu0oftyr/

Answer 2

使用

  clear: left;
  float: left;
  margin-left: [the percentage value for your distance];

从容器中删除弹性设置并添加overflow: hidden以确保浮动被视为容器高度的一部分。

以下是一个例子：

＆＃13;

#root {
  width: 50%;
  border: solid;
  overflow: hidden;
}
#one {
  clear: left;
  float: left;
  margin-left: 20%;
  border: 1px solid red;
}
#two {
  clear: left;
  float: left;
  margin-left: 60%;
  border: 1px solid green;
}

＆＃13;

<div id="root">
  <div id="one">1</div>
  <div id="two">2</div>
</div>

＆＃13;

P.S。：您可以使用所有正确的设置执行类似操作：

  clear: right;
  float: right;
  margin-right: [...];

如何独立浮动元素？

2 个答案: