Question

这是我的默认浏览器尺寸。我的QR码位于正确的位置。 enter image description here

当我重新调整浏览器的大小时。我得到了这个。但是如果我减少它，我的QR code就会消失。 enter image description here

我希望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>

Answer 1

这是你需要的吗？

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

DEMO：http://jsfiddle.net/fWAg5/

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

Answer 2

问题是1）表格宽度为600像素（800px的75％），因此它永远不会随窗口缩小，2）验证码和QR码位于相邻的表格单元格中，因此它们不能相对于彼此表现得流畅。你不能float表格单元格。

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

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

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

2 个答案: