我正在HTML5
使用 Jquery Mobile 构建一个移动应用程序,我想做的是显示 2 张图像,一张在右侧,另一张在左侧。重要的是在调整窗口浏览器大小时,图像不应该消失,并且始终显示在右侧和左侧,以便适应不同的移动屏幕。
我尝试使用 CSS :
float:right
, left:85%
...
但是调整大小后它就消失了....
我正在HTML5
使用 Jquery Mobile 构建一个移动应用程序,我想做的是显示 2 张图像,一张在右侧,另一张在左侧。重要的是在调整窗口浏览器大小时,图像不应该消失,并且始终显示在右侧和左侧,以便适应不同的移动屏幕。
我尝试使用 CSS :
float:right
, left:85%
...
但是调整大小后它就消失了....
没有看到任何代码,我不确定你尝试了什么。但是您可以使用以下方法实现此目的:
<div style="position:fixed;left:0;"><img src="fakeimageurl.jpg" width="100" /></div>
<div style="position:fixed;right:0;"><img src="fakeimageurl.jpg" width="100" /></div>
或者,如果您希望图像不随滚动移动...
<div style="position:absolute;left:0;"><img src="fakeimageurl.jpg" width="100" /></div>
<div style="position:absolute;right:0;"><img src="fakeimageurl.jpg" width="100" /></div>
这是一个帮助您入门的示例。尝试重新调整浏览器的大小。
我建议使用 psuedobefore
和after
选择器来创建您的背景图像标记,因为这不是您在语义上希望出现在页面上的东西
基本标记:
<div id="main">
Page content
</div>
基本 CSS:
#main { position: relative; z-index: 1 }
#main:before { content: ''; z-index: -1; position: absolute; top:0; bottom: 0; left: 0; right: 50%; }
#main:after { content: ''; z-index: -1; position: absolute; top:0; bottom: 0; right: 0; left: 50%; }
,将元素拉伸到目标容器 ( ) 的整个高度,而 //占据top:0
适当的一半。bottom:0
#main
left
right
0
50%
现在设置背景图像before
和after
定义。您也可以使用缩放背景图像background-size
,但这可能不是必需的。