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

时间:2015-09-05 05:34:50

标签: html css

我正在进行的项目中,我有一个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;
}

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

1 个答案:

答案 0 :(得分:0)

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

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

我改变的主要内容是:

  1. 删除了没有必要的绝对定位
  2. 将活动区域的宽度设置为其容器的100% - 可用的最大宽度,以响应浏览器宽度的变化
  3. 根据%宽度将相对位置放在此内,而不是根据绝对像素或ems
  4. 它可能不适合你想要的东西,但肯定会更具响应性。