Как плавать элементы самостоятельно?

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>

Мое ожидание было, что первый элемент будет в 10% от ширины div (так что 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: [...];