1

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

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

我要QR code下captcha。我已经搜索过了，得到了一些答案，但在我的情况下都不起作用。请帮忙。

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

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

2 回答 2

0

问题是 1）表格是 600 像素宽（800 像素的 75%），所以它永远不会随着窗口缩小，2）验证码和 QR 码在相邻的表格单元格中，所以它们不能正常工作流动地相对于彼此。你不能float表格单元格。

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

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

于 2013-07-23T07:36:01.283 回答
0

这是你需要的吗？

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

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

Capta 和 qrcode div 在有足够空间的地方显示内联，如果空间不足，则垂直堆叠。但是，如果您想针对不同的分辨率执行此操作，我建议您查看媒体查询！

于 2013-07-23T06:37:58.940 回答