使div向左增长而不是向下向右增长

Question

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>

​

Answer 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;
}

Answer 2

如果你想通过增加width属性从右向左移动你的图像，你应该给它一个浮动属性：

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

Answer 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>

​