Как отпозиционировать 2 и более элементов?

Question

[Ingernirated]

Скажите, пожалуйста, как сделать центровку, позиционирование 2 и более элементов?
Есть div с width:100% height:100px;
Как в него засунуть 3 div так, чтобы был 1 родитель прямоугольник и в нём 3 div, которые были бы по ширине одинаковы и имели одинаковый отступ друг от друга, и от краев родителя? (ширина не фиксированная по px);
В моих попытках с li оставались 2 элемента, а 3-ий вылазил за родителя или был некорректный отступ.

Comments

[Рюрик Ростиславич]

Через position:absolute или % пробовали?

[devstudent]

а какое значение dispay было у ваших li ?

Answer 1

[devstudent]

Самый простой вариант вот так

<ul class="parent">
  <li class="child"></li>
   <li class="child"></li>
   <li class="child "></li>
  </ul>

стили

* {
box-sizing: border-box;
}
.parent {
  list-style-type: none;
  display: block;
  width: 500px;
  position: relative;
  padding: 0;
  margin: 10px;
  height: 150px;
  border:1px solid blue;
}
.child {
  position: relative;
  width: 30%;
  height: 100%;
  border:1px solid red;
  display: block;
  float: left;
  margin-left: 2.5%;
}