如何独立浮动元素？

debugcn 发表于 Dev

月刊

我想将某些元素放置在距父对象的左边框不同距离的位置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％。情况并非如此，文档中提到

浮动元素之后的元素将在其周围流动。

他们还提到clear可以用来避免这种情况，但是我没有设法做到这一点（也就是说，这样做是为了从父项的左边界重新计算每个float 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>

w00

您可以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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。