Блог

Главная - Вопросы по программированию - Сделать так, чтобы div увеличивался влево, а не вниз вправо

Сделать так, чтобы div увеличивался влево, а не вниз вправо

#html #css

#HTML #css

Вопрос:

Div должен увеличиваться влево, однако на данный момент он делает обратное.

Кстати, поля-слева и сверху — необходимы.

Быстрый gif, демонстрирующий проблему: https://gyazo.com/ce51c504698395c26cffefb9b74e7e3e 

 html, body {
  width: 100%;
  height: 100%;
}

#a {
  width: 50%;
  height: 100%;
  border: 1px solid black;
}

#img-wrapper {
  margin-left: 10%;
  margin-top: 20%;
  width: 50%;
  position: relative;
  border: 1px solid red;
}

img {
  width: 100%;
}  
 <div id="a">
  <div id="img-wrapper">
   <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>

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

1. Что вы подразумеваете под «должен увеличиваться влево»?

2. @sebastian nielsen вы имеете в виду, что при увеличении ширины он должен увеличиваться влево??

3. Да, он должен увеличиваться и влево. На данный момент он увеличивается вниз и вправо. Смотрите gif.

4. Попробуйте сделать положение Div абсолютным, а правое — равным 0.

Ответ №1:

Попробуйте это:- 

 #a {
    width: 70%;
    height: 100%;
    border: 1px solid black;
    position: relative;
}
#img-wrapper {
    width: 40%;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 1px solid red;
}

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

1. Извините, это не работает. Взгляните на этот gif: gyazo.com/184ef711bad9b85c9d983ffc6d10a69d

2. Ну, «position: absolute;» не допускается. Поскольку это вызовет другие проблемы на моем веб-сайте. Вот почему я написал «необходимы поля слева и сверху».

3. пока мы добавили ‘position: relative;’ к #a, это не повредит.

4. Без Position вы не сможете этого сделать.

5. Эй, виноват, я изменил ширину img, а не «img-обертку». Это работает.

Ответ №2:

Если вы хотите, чтобы ваше изображение перемещалось справа налево путем увеличения width свойства, вы должны присвоить ему свойство float:

 #img-wrapper {
  float: right;
  margin-top: 0; // if you want it to start from top right edge
}

Ответ №3:

добавлено margin-right: 10%; float: right; 

 #img-wrapper {
    margin-right: 10%;
    margin-top: 20%;
    width: 50%;
    position: relative;
    border: 1px solid red;
    float: right;
}
  

 html,
body {
  width: 100%;
  height: 100%;
}

#a {
  width: 50%;
  height: 100%;
  border: 1px solid black;
  position: relative;
}

#img-wrapper {
    margin-right: 10%;
    margin-top: 20%;
    width: 52%;
    position: absolute;
    border: 1px solid red;
    right: 0;
    bottom: 50%;
    transform: translateY(50%);
}

img {
  width: 100%;
}  
 <div id="a">
  <div id="img-wrapper">
    <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
  </div>
</div>

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

1. Прошу прощения, но он по-прежнему не увеличивается вправо. Взгляните: gyazo.com/f0620a07f1be222de4a6a9a248197cad

2. @sebastian nielsen проверь сейчас. я обновил свой ответ. Спасибо

3. Что ж, теперь он увеличивается вверх, и это хорошо! Тем не менее, он по-прежнему увеличивается вправо, я хочу, чтобы вместо этого он увеличивался влево.

4. @sebastian nielsen в gif вы увеличиваете ширину img , а в вопросе вы увеличиваете #img-wrapper

Ответ №4:

Похоже, проблема заключается не в том, чтобы заставить изображение «увеличиваться влево», а в позиционировании #img-wrapper .

Вы можете решить эту проблему, расположив #img-wrapper абсолютно и указав его bottom и right позицию. Я добавил стиль : hover, чтобы вы могли видеть, как он «увеличивается» при наведении курсора мыши.

Однако хочу предупредить. Позиционирование чего-либо неизвестного / переменного размера с использованием процентов даст вам очень неоднозначные результаты при разных размерах области просмотра. Возможно, то, что вы хотите, не совсем так, как описано, но я думаю, вам следует обратить внимание на более гибкое решение, такое как использование flexbox.

 html, body {
  width: 100%;
  height: 100%;
}

#a {
  width: 50%;
  height: 100%;
  border: 1px solid black;
  position:relative;
}

#img-wrapper {
  right: 30%;
  bottom: 30%;
  width: 50%;
  position: absolute;
  border: 1px solid red;
}

#img-wrapper:hover {
  width: 70%;
}


img {
  width: 100%;
}  
 <div id="a">
  <div id="img-wrapper">
   <img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>

Ответ №5:

 html, body {
  width: 100%;
  height: 100%;
}

#a {
  width: 50%;
  height: 100%;
  border: 1px solid black;
  position: relative;
}

#img-wrapper {
  width: 50%;
  border: 1px solid red;
  margin: 20% 0 0 20%;
  position: absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
}

img {
  width: 100%;
}

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

1. Будет лучше, если вы предоставите некоторое объяснение

2. вы также можете заменить этот код своим кодом, я добавил относительный в # a, а после этого #img-абсолютный идентификатор оболочки, а также верхнее левое преобразование и поля