Set contents of page according to browser resoluti

问题:

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>

回答1:

Is this what you need?

<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 and qrcode div display inline where there's enough space and stack vertically if space isnt sufficient. But if this something you'd like to do for different resolutions, I'd suggest looking into media queries!

回答2:

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.