html - 使 div 向左而不是向右增长

Question

div 应该向左生长，然而，它现在做的恰恰相反。

顺便说一句，margin-left 和 top 是必需的。

展示问题的快速 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;
}