Question

我正在进行的项目中，我有一个div，里面有4个div。内部div有固定的位置我想让div响应，并且我希望所有4 div保持原来的位置这是我的代码jsfiddle

我使用margin-top，margin-left

放置内部div位置

.one{
    margin-top: 16em;
    margin-left: 2em;
    position: absolute;
}
.spinner.two {
    margin-top: 20em;
    margin-left: 1em;
    position: absolute;
}
.spinner.three {
    margin-left: 4em;
    margin-top: 23em;
    position: absolute;
}
.spinner.four {
     margin-left: 14em;
    margin-top: 19em;
    position: absolute;
}

但我没有做出回应....请帮助

Answer 1

我根据设备宽度创建了一个响应更快的jsfiddle。 https://jsfiddle.net/0kahjww6/1/

.one { margin-left: 7%; }
.two { margin-left: 4%; }
.three { margin-left: 17%; }
.four { margin-left: 40%; }

我改变的主要内容是：

删除了没有必要的绝对定位
将活动区域的宽度设置为其容器的100％ - 可用的最大宽度，以响应浏览器宽度的变化
根据％宽度将相对位置放在此内，而不是根据绝对像素或ems

它可能不适合你想要的东西，但肯定会更具响应性。

如何使div及其内部内容响应

1 个答案: