Question

我正在使用HTML5和Jquery Mobile构建移动应用程序，我要做的是显示2个图像，一个在右侧，另一个在左侧。重要的是，在调整窗口浏览器大小时，图像不应该消失，并且总是在右侧和左侧显示，因此它将适合不同的移动屏幕。

我尝试使用CSS： float:right，left:85% ...

但是在调整它之后它就消失了......

Answer 1

没有看到任何代码，我不确定你尝试过什么。但您可以使用以下方法实现此目的：

<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>

Answer 2

Here is an example让你开始。尝试重新调整浏览器的大小。

我建议使用psuedo before和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，但这可能没有必要。

在角落上显示图像，以便在调整窗口大小后图像保持在同一位置

2 个答案: