Блог

Главная - Вопросы по программированию - Анимировать div за пределами экрана вправо

Анимировать div за пределами экрана вправо

#jquery #html #css

#jquery #HTML #css

Вопрос:

Со следующим HTML:

 <div id="container" style="width: 100%; overflow-x: hidden;">
  <div id="left" style="width: 50%; display: inline-block;">
  </div>
  <div id="right" style="width: 50%; display: inline-block;">
  </div>
</div>

Я хочу анимировать левый div до ширины: 100%, а затем сдвинуть правый div вправо.

Я думал, что overflow-x: hidden будет работать, но правый div сразу опускается ниже левого div, как только левый div достигает 51%.

Какие-нибудь идеи, пожалуйста?

Ответ №1:

Используйте display: flex inparent div и set flex: 0 0 auto , чтобы браузер не пытался поместить дочерние элементы в родительский

 #container {
  width: 100%;
    overflow-x: hidden;
    display: flex;
}
#left {
  background-color: blue;
  height: 100px;
  width: 62%;
    flex: 0 0 auto;
}
#right {
  background-color: red;
  
  height: 100px;
  width:50%;
    flex: 0 0 auto;
}  
 <div id="container" >
  <div id="left" > </div>
  <div id="right" > </div>
</div>

Комментарии:

1. Раньше не использовал «flex». Работает великолепно! Спасибо.

2. PS. Есть идеи, почему overflow-x: hidden не выполнил задание?

3. @NeilW На самом деле проблема не в overflow-x: hidden этом. Я только что понял, что вы можете продолжать использовать display: inline-block , но вам также придется поместить white-space: nowrap at #container , чтобы его дочерний элемент оставался на той же строке. проверьте это codepen.io/krugtep/pen/zXarwZ