右侧的响应图像

Question

我试图将我的图像放在屏幕的右侧，将我的文本放在左侧，但是在我调整浏览器大小时使图像具有响应性。

#fmap{
        position: absolute;
        right: 0%;
        margin-right: 0;
        display:block;
        margin:10px;
        width: 100%;
        height: auto;
        border: 12px double #d3d3d3;
        max-width:850px;
    }

<div class="maptext" id="facilitymap">
    <p><a href="https://www.google.co.uk/maps/dir//Colman+House,+University+of+East,+Norwich+NR4+7TJ/@52.6212166,1.244658,17z/data=!4m9!4m8!1m0!1m5!1m1!1s0x47d9e1e20deda5b1:0x60290452cbfc9649!2m2!1d1.2468467!2d52.6212134!3e0">
        <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="" id="fmap" >
        </a>
    </p>

</div>

Answer 1

这是在父 div 上使用 flexbox 的一种方法；

.container {
/*this makes the parent container into a flex container*/
/*divs within this parent container become responsive flex items*/
display: flex;
}

.left {
padding: 20px;
}

#facilitymap {
width: 100%;
}

img {
width: 100%;
}

@media screen and (max-width: 600px) {
.container {
/*switch to column view when screen is 600px or smaller*/
flex-direction: column;
}
}

<div class="container">
  <div class="left">
  <p>left side text</p>
  </div>

  <div class="maptext" id="facilitymap">
      <a href="https://www.google.co.uk/maps/dir//Colman+House,+University+of+East,+Norwich+NR4+7TJ/@52.6212166,1.244658,17z/data=!4m9!4m8!1m0!1m5!1m1!1s0x47d9e1e20deda5b1:0x60290452cbfc9649!2m2!1d1.2468467!2d52.6212134!3e0">
        <img src="https://cdn.pixabay.com/photo/2020/07/27/14/34/stars-5442598__340.jpg" alt="" id="fmap">
      </a>

  </div>
</div>