如何獨立浮動元素？

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

浮動元素後面的元素將圍繞它流動。

他們還提到，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]; 

刪除從容器柔性設置並添加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: [...];