Question

我正在尝试将响应宽度添加到绝对容器内的某些框中：

有关容器和框元素的代码段：

.popbody{
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  max-width: 830px;
  max-height: 450px;
  width: 100%;
}

.popboxes{
  position: relative;
  width: 100%;
  max-width: 166px;
  min-width: 120px;
  height: 100%;
  max-height: 90px;
  min-height: 75px;
  float: left;
}

在调整浏览器大小时，为容器和盒子提供100％不会启用响应宽度。当我尝试用非绝对定位和100％宽度将div元素包装在div中时，它会破坏事物。

是否有可能实现我正在尝试做的事情，或者我只是使用不好的方法？

谢谢！

Answer 1

不确定这是否是您所追求的，但将最小和最大宽度值更改为vw或％，它不会打破方框。

DEMO

.popbody{
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    max-width: 830px;
    max-height: 450px;
  width: 100%;
}

.popboxes{
    position: relative;
    width: 100vw;
    max-width: 20vw;
    min-width: 15vw;
    height: 100%;
    max-height: 90px;
    min-height: 75px;
    float: left;
}

.boxinner{
    position: absolute;
    background: blue;
   left: 0;
   right: 12px;
   top: 0;
   bottom: 8px;
}

.redbox{
    position: relative;
    width: 100vw;
    max-width: 50vw;
    height: 100%;
    float: right;
    background-color: red;
}

Viewport Sized Type

响应的绝对div内的元素宽度？

1 个答案: