根据浏览器分辨率设置页面内容

这是我的默认浏览器大小。我的QR码在正确的位置。 在此处输入图像描述

当我重新调整浏览器的大小时。我得到了这个。但是如果我减少它的话,我的QR code就会消失。 在此处输入图像描述

我想要validationQR code下的QR code 。 我搜索了它,得到了一些答案,但都没有在我的情况下工作。请帮助。

这是我的代码。谢谢。

  <div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10 px; width: 75%"> 
@Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)
@TempData["ErrorMessage"]

这是你需要的吗?

 
.captcha{ float:left; width:200px; height:100px; background:#123; } .qrcode{ float:left; width:200px; height:100px; background:#456; }

演示: http : //jsfiddle.net/fWAg5/

如果空间不足,Capta和qrcode div显示内联,其中有足够的空间并垂直堆叠。 但是,如果你想为不同的分辨率做这件事,我建议调查媒体查询!

问题是1)表格宽度为600像素(800px的75%)因此它永远不会随窗口缩小,2)validation码和QR码位于相邻的表格单元格中,因此它们无法表现出来相对于彼此流畅地。 你不能float表格单元格。

因此,从外部div和表中删除宽度,将QR放在与validation码相同的表格单元格中,然后浮动validation码,例如将其放入容器中并为容器提供一些样式。

我做了一个小提琴 ,但请注意,你不能只是复制我的代码,因为我必须删除所有MVC命令,使其看起来正确。