如何独立浮动元素？

Question

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

由于 position 似乎不是正确的方法，我尝试通过将元素向右浮动来做到这一点

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

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

我的预期是第一个元素位于 div 宽度的 10%（因此页面宽度的 5%，因为父元素 div 相对于页面宽度为 50% ) 和第二个 80%。事实并非如此，docs提到

Elements after a floating element will flow around it.

他们还提到 clear 可以用来避免这种情况，但我没有设法做到这一点（也就是说，让每个浮点数都从父元素的左边界重新计算 div).

这有可能吗？

作为一种解决方法，我考虑过计算第二个元素相对于第一个元素的浮点数，但这会使我的代码非常复杂 (*)，所以也许有一个更简洁的解决方案。

(*) 对于上述情况，80% - 20%（已经浮动的）= 60%。但即使在这里，定位也不正确（2 太靠右了；应该有 20% 的空白，1，40% 的空白，2，20% 的空白 - 但是数字本身的宽度也应考虑在内）

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

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

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

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

这是一个例子：

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

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

P.S.: 你可以对所有 right 设置做类似的事情:

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

如何独立浮动元素？

How to float elements independently?

html

css

position

flexbox