Блог

У меня есть несколько html-элементов: в основном контейнер div и дочерний div. Поэтому, когда я даю дочернему div свойство CSS left: 100% , оно выходит из родительского div. Свойство right: 0 или CALC сделают свое дело, но я хочу, чтобы это было сделано только с left: 100% помощью, и без Javascript. Итак, есть ли какой-нибудь способ сделать это?

 .parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: 100%;
  position: absolute;
  width: 100px;
}
 

https://jsfiddle.net/evoSL/yd48v14m/4/

Это правильное поведение. Если вы установите left:100% в этой настройке, он займет ширину родительского элемента и переместит дочерний элемент на 100% этой ширины вправо, что составляет 500 пикселей. Вы можете, как уже упоминалось, установить отрицательную ширину поля с фиксированными значениями пикселей, но я бы не рекомендовал это. Что, если у вас макет с плавной шириной? Это не сработает.

Что не так right: 0 , он предоставляет именно то, что вы ищете.

В противном случае, если вы все еще хотите работать, left: 100%; вы можете добавить transform: translateX(-100%) к дочернему элементу. это переместит дочерний элемент по оси X на его ширину.

Ну, если у вас есть фиксированный с, вы можете сделать это с отрицательным запасом для вашего дочернего элемента:

 .parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: 100%;
  position: absolute;
  width: 100px;
  margin-left: -100px;
}
 

https://jsfiddle.net/yd48v14m/5/

Вы также можете сделать это с помощью чисел с плавающей запятой. Я не знаю, чего вы хотите достичь в конечном итоге, но это то, что вы тоже могли бы использовать:

 .parent {
  border: 1px solid #000;
  height: 500px;
  width: 500px;
}
.child {
  background: #FF0;
  height: 100px;
  width: 100px;
  float: right;
} 

 <div class="parent">
  <div class="child"></div>
</div> 

С left: 100% вы делаете так, чтобы первая граница вашего дочернего элемента оставалась только в конце их контейнера

Если ваша цель — выровнять желтое поле по правому краю, здесь у вас есть варианты:

 .parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: calc(100% - 100px);
  position: absolute;
  width: 100px;

}
 

 .child{
  background: #FF0;
  height: 100px;
  right: 0;
  position: absolute;
  width: 100px;

}