我正在完成新主页并调整响应速度。目前带有汉堡和调整大小的 Logo 的导航工作正常。
当您到达 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 的尺寸都在减小,有什么解决办法吗?
如果我能解决这个问题,我就可以对主页的其他部分使用相同的原则,例如页脚/下半部分,它们也需要在较小的屏幕上很好地调整大小:)
最佳答案
% 中的所有 css 值都与具有指定位置的第一个父级相关。 添加相对于您想要的父元素的位置,它将按预期工作。
关于html - 使用 imgs/slider 调整动态 DIV 的大小 - 最大宽度未按计划运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34596060/