如何独立浮动元素？

我想定位一些元素在父母的左边界不同的距离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提到

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

他们还提到，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>

来源

2016-11-11 WoJ

浮动简化版，工作，显示器挠性 –

请注意，浮动容器中的浮动被忽略。 http://stackoverflow.com/q/39194630/3597276 –

@Michael_B（和GermanoPlebani） - 啊？我没有意识到这一点。那么为什么数字在我的第一个代码片段中移动到右侧？ – WoJ

你可以你想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/

来源

2016-11-11 15:35:45 w00

使用

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

删除从容器柔性设置并添加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>

PS：你可以做所有正确的设置类似的东西：

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

来源

2016-11-11 15:37:02 Johannes

如何独立浮动元素？

回答

相关问题