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

这是我的默认浏览器尺寸。我的二维码在正确的位置

当我重新调整浏览器的大小时，我得到了这个。但是在这里，如果我进一步缩小，我的

二维码就会消失

我想要
验证码下的
二维码
。我已经搜索过了，得到了一些答案，但都不适用于我的情况。请帮忙

这是我的密码，谢谢

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


@验证码（“刷新”，“输入验证码”，5，“是必填字段。”，true）@TempData[“ErrorMessage”]
这就是你需要的吗

<div class="container">
    <div class="captcha"></div>
    <div class="qrcode"></div>
</div>

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

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


验证码{
浮动：左；
宽度：200px；
高度：100px；
背景：#123；
}
.qrcode{
浮动：左；
宽度：200px；
高度：100px；
背景：#456；
}

演示：

Capta和qrcode div在有足够空间的位置内联显示，如果空间不足，则垂直堆叠。但如果你想为不同的分辨率做些什么，我建议你调查一下媒体查询
 问题在于1）表宽600像素（800px的75%），因此它不会随着窗口而缩小；2）验证码和二维码位于相邻的表单元格中，因此它们不能相对流动。不能浮动表单元格

因此，从外部div和表中移除宽度，将QR放在与captcha相同的表单元格中，并浮动captcha，例如，将其放在容器中，并给容器一些样式

我做了一个修改，但请注意，您不能只是复制我的代码，因为我必须删除所有MVC命令以使其看起来正确。
也许您想尝试一个响应性CSS框架。