html - 使用 imgs/slider 调整动态 DIV 的大小 - 最大宽度未按计划运行

Question

我正在完成新主页并调整响应速度。目前带有汉堡和调整大小的 Logo 的导航工作正常。

首页:http://www.showstyle.lu/

当您到达 slider 区域(4 个图像，其中 2 个是 slider )时，我在媒体查询 < 1199px 上尝试了各种方法，例如创建“显示: block ；”这样它们至少会出现在彼此下方，但这一点也不美观。

坦率地说，如果 4 个部分只是动态调整大小直到 300 像素，我根本不会介意，我会为最小的智能手机简单地添加 4 个基本平面图像 - 对于平板电脑，至少调整大小功能看起来会更好。

因此:我将 4 个 div 包围在 #v2_slider_mob 中，并赋予它与网站其他部分相同的调整大小属性:

#v2_slider_mob {
  max-width: 100%;
  height: auto;
}

这是 4 个 div 的代码:

#v2_selline1 {
  display: block !important;
  width: 100%; 
  height: 300px; 
}

#v2_selbox1 {
  float: left;
  width: 750px;
  height: 100%;
}

#v2_selbox2 {  
  float: left;
  width: 375px;
  height: 100%;

}
#v2_selline2 {
  display: block !important;
  width: 100%;
  height: 300px; 
}

#v2_selbox3 {
  float: left;
  width: 562px;
  height: 100%;  
}

#v2_selbox4 {
  float: left;
  width: 562px;
  height: 100%;  
}

目前图像仍然只是在彼此下方对齐，而不是整个 div 的尺寸都在减小，有什么解决办法吗？

如果我能解决这个问题，我就可以对主页的其他部分使用相同的原则，例如页脚/下半部分，它们也需要在较小的屏幕上很好地调整大小:)

Answer 1

% 中的所有 css 值都与具有指定位置的第一个父级相关。添加相对于您想要的父元素的位置，它将按预期工作。