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

问题描述

下面是我的默认浏览器size.And我QR code是在正确的地方。

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

当我重新大小我的浏览器。我得到了这个one.But我在这里的 QR code 正在消失，如果我降低更多。

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

我想 QR code 的 CAPTCHA在。我已经搜查，得到了一些答案，但在我的case.Please帮助所有无法正常工作。

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

下面是我的code.Thanks提前。

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>

推荐答案

的问题是1）的表是600像素宽（的800像素的75％），所以它永远不会与窗缩小，和2）的验证码和QR code是在相邻的表格单元，因此它们不能被制成流体相对于彼此表现。你不能浮动表格单元格。

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.

那么，请从外层div和表格​​的宽度，把QR作为验证码相同的表格单元格，并通过把在一个容器中，让容器一些风格浮动验证码，例如。

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.

我做了一个小提琴，但请注意，你不能只是复制我的code回来，因为我不得不删除所有的MVC指令，使它看起来正确的。

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