绝对div来自小型设备上的容器div

时间:2016-01-24 01:56:57

标签: html css

我创建了一个基于Bootstrap 3的新网站,我需要在容器类之外放置两个div s(广告横幅)。

第一个位于页面左侧,第二个位于页面右侧。一切都运行正常,但我在小设备上有一个小问题我看到页面右侧的第二个横幅与容器重叠。这是我的CSS代码:

position:absolute;
left:0;
top:0;

问题的截图(桌面与HTC One X)http://www11.0zz0.com/2016/01/24/04/143938558.png

相关网站为http://eljadida24.com

2 个答案:

答案 0 :(得分:2)

您的网站没有响应,这是造成此问题的主要原因。

对于小型设备,我认为您应该检查 媒体查询 ,以便为不同的媒体分别安排不同的HTML元素,例如屏幕尺寸。

此外,如果您希望元素根据屏幕大小自动向下滑动,则 960网格 是一个选项。

如果您不希望任何元素面向下一行,只是在较小的屏幕中调整为较小的元素,请检查Responsive web development here. 在响应中,您需要将以像素'px'为单位测量的所有元素转换为百分比'%'。对于同一网站,可以使用this website.

将'px'转换为'%'

答案 1 :(得分:1)

JSfiddle

替换横幅和内容区域的width,然后重新设置。两个横幅都不会以任何宽度重叠内容区域。