根据浏览器分辨率设置页面内容 [英] Set contents of page according to browser resolution

问题描述

这是我的默认浏览器大小.我的二维码在正确的位置.

当我重新调整浏览器大小时，我得到了这个.但是如果我减少更多，我的 QR 码 就会消失.

我想要验证码下的二维码.我已经搜索过了，得到了一些答案，但在我的情况下都不起作用.请帮助.

这是我的代码.提前致谢.

 <div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10</table>px;宽度:75%"><table width="75%" style="margin-left:1%"><tr><td>@Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">@TempData["ErrorMessage"]</div></td><td><div id="qrcode" style="width: 200px; display: none"><img src="@Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })" onclick="AppendURL('@this.Model.ShortUrl')"/>

</td></tr>

解决方案

问题是 1) 表格的宽度为 600 像素(800 像素的 75%)，因此它永远不会随着窗口缩小，以及 2) 验证码和QR 码位于相邻的表格单元格中，因此无法使它们相对于彼此流畅地表现.您不能浮动表格单元格.

因此，移除外部 div 和表格的宽度，将 QR 放在与验证码相同的表格单元格中，并浮动验证码，例如将其放入容器中并为容器提供一些样式.

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

Here is my default browser size.And my QR code is at right place.

When i re-size my browser .I got this one.But here my QR code is disappearing if I reduce it more.

I want QR code under the captcha. I have searched it ,got some answers but all not working in my case.Please help.

Here is my code.Thanks in advance.

       <div style="border: 1px solid lightgrey; border-radius: 10px 10px 10px 10
        </table>px; width: 75%">
        <table width= "75%" style="margin-left:1%">
            <tr>
                <td>
                    @Html.Captcha("Refresh", "Enter Captcha", 5, "Is required field.", true)<div style="color: Red;">@TempData["ErrorMessage"]</div>
                </td>
                <td>
                    <div id="qrcode" style="width: 200px; display: none">                       
                        <img src="@Url.Action("QrCode", "Qr", new { url = Model.ShortUrl })"  onclick="AppendURL('@this.Model.ShortUrl')"/>
                    </div>
                </td>
            </tr>
        </table>
    </div>

解决方案

The problem is 1) the table is 600 pixels wide (75% of 800px) so it will never shrink with the window, and 2) the captcha and the QR code are in adjacent table cells, so they can't be made to behave fluidly relative to to each other. You can't float table cells.

So, remove the widths from the outer div and the table, put the QR in the same table cell as the captcha, and float the captcha, for instance by putting that in a container and giving the container some styles.

I made a fiddle, but note that you can't just copy my code back, as I had to remove all the MVC commands to make it look right.

这篇关于根据浏览器分辨率设置页面内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！