Question

因此，我想创建一个与PC相关的网站。几年前，我开始编码，所以我决定再次尝试。我遇到了以下问题。

https://imgur.com/VjZaUEZ
如果您看这张照片，可以看到我制作的网站部分。我希望它具有响应性，以便缩小浏览器时图片左侧的文本（CPU的解释）缩小。

但是，这正在发生： https://imgur.com/LBaHlOu
我希望图片下面的文字紧挨着它并缩小。几个小时后尝试使用display：和margin：等，我决定问你们。

这是我的验证码（我知道验证码不是最好的）：

CSS ：https://imgur.com/UOThxjv

HTML ：https://imgur.com/DAhC6dx

如果您需要任何澄清，请问我。

Answer 1

CSS代码中的所有尺寸和边距都是恒定的像素长度。

相反，您应该使它们占窗口大小的百分比。例如，通过将20%的这一行放入其CSS类中，可以使div标签或图像的宽度始终等于屏幕大小的CSS，如下所示：< / p>

width: 20%;

Answer 2

您需要将h4动态宽度周围的div设置为60％。为img制作div容器，并将其宽度设置为40％。您也应该使用parahraphs而不是标题4。

修改HTML：

<div class="text">
  <p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>

CSS：

.text {
  width: 60%;
  float: left;
}

.img-div {
  float: right;
  width: 40%;
}

.img-div img {
  width: 100%;
  height: 100%;
}

自适应图像图

要使图像地图具有响应性，您需要使用js脚本来调整窗口大小调整时的坐标，或将.SVG图像用于图像地图：